Search Results for 'image size cover'

Just discovered this thread as I was looking for a solution to this very issue, having bought the SquareOne theme yesterday – love the look of it on desktop, but on mobile devices it was doing exactly as described: showing only a heavily zoomed-in portion of the background image.

I went delving into the CSS of Studiopress’s Parallax Pro theme, and I *think* this is the solution. It’ll display the background image on mobile, scrolling instead of fixed and somewhat cropped (i.e. just as they are on Parallax Pro), but more recognisable as to what the image actually is.

You need to add this in the Media Queries section of the CSS for SquareOne, for ‘@media only screen and (max-width: 1180px)’, for each of the background image areas – which in the case of SquareOne is .head-bg, .home-feature-2, .home-feature-4, .home-feature-6 and .footer-widgets:

background-attachment: scroll;
background-position: top;
-webkit-background-size: auto;
-moz-background-size: auto;
background-size: auto;

Hope this works for the moment. Sure that Wes will add some finesse to this when he issues a fix!

Take a look in your css file around line 1168 (default) and you can add the link to your image –

/* Slider
--------------------------------------------- */

.slider {
	background-attachment: fixed;
	background-image: url(images/slider-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;		
    clear: both;
}

You’d have to change that using css, since that background uploader is for images. However, I’ve made it a bit easier to do this. Take a look in your css and you’ll see a section like this –

/* Home Feature Classes */
 
/*You can add background images/colors to each section of the homepage by adding them to the classes below.
*/

.hf1,
.hf3,
.hf4,
.hf5,
.hf6,
.hf7,
.hf8,
.hf9,
.hf14 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

.hf1 {}

.hf3 {}

.hf4 {}

.hf5 {}

.hf6 {}

.hf7 {}

.hf8 {}

.hf9 {}

.hf14 {}

So if you add a background color to any of those it will override the default color. Example –

.hf1 {
    background-color: #000
}

For now, you can do this from the style.css in each section. If you have a link to your site, I can tell you exactly where each line is that you’ll need to edit so you won’t have to search through all of the code. For example, to change the first image of the header and the slider area on the demo you’ll see this on line 1785 –

.head-bg {
background-attachment: fixed;
background-image: url(images/home-img-1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Once you upload an image to your site you can add it in the background-image area of the code above. You can upload an image in your Media section of your admin, or you can upload it via FTP depending on whichever one is easiest for you.

This is one of the ways to do it for now, because I will add an easier method by creating a uploader function which will automatically upload your images into place without needing to touch the css code…..similar to the WordPress Header and Background uploader.

The border is actually a white background which shows up because of the way the image is positioned when the browser is resized. We can fix it by adding background-size: cover; to the hf-bg on line 1329 in your css like this –

.hf-bg {
    background: url(http://rcs.nextdev.co.uk/wp-content/uploads/2014/02/couple-talking.jpg) center no-repeat;
    background-size: cover;
}

First thing I noticed is that you have the .wrap set to 940px on line 560, which causes the hyperlink to move towards the right of the image. If you change that back to 1140px it will move back and cover the image. Then you’ll probably want to change this (line 1326) –

.header-full-width .title-area, 
.header-full-width .site-title {
    width: 100%;
}

….to a smaller width, like 300px or whatever size your image is and that way the link won’t cover the entire width of the page.

I’m not sure exactly how you want it to look, but if you add background-size: cover; that will make the image a little more responsive (line 1159 in your css) –

.slider-wide {
    background-size: cover;
    background: url('http://www.lagboltmedia.com/wp-content/uploads/2013/12/skyscraper.jpg') no-repeat fixed center;
    clear: both;
    height: 500px;
    width: 100%;
}<!--formatted-->

Then I’d remove the height that you added, but you could do that in your responsive section of the css if you want to keep it for desktop browsers.

You could also remove the margin-bottom for the .slider-wide .wrap on 1167 in your css to remove the blue color from showing up at the bottom.

Take a look here – https://appfinite.com/topic/customer-header-not-resizing-in-responsive/

There are a few posts here in the forums that already cover how to do this…..you can do a search for them on the main Forum page – https://appfinite.com/forums/

Nick Croft has a plugin that does it automatically if you don’t want to code it – http://designsbynickthegeek.com/plugins/genesis-responsive-header-updated (there should be another updated version as well)

Background images don’t resize by default….but inline images do. So you’ll have to add code to make the background images resize or add a smaller image for mobile devices….either way should work.

@dev77 All Genesis themes function in the same way, including Legacy. This theme isn’t any different than the others. You use the WordPress Uploader to upload an image just like a regular WP theme.

The standard size is 960 x 100, you can easily change this. Simply find out the exact size of your image, then go into your functions file and change the header size to the size of your image. Then upload your image and no cropping will be needed.

This is the code you will be looking for in your functions file –

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );

Thats it! It definitely won’t take 10 minutes….

As @selfpowerment mentioned, I add tutorials that are specific to my themes. All of the main documentation can be found on the StudioPress site. Everything is already covered, and yes we do assume that you are aware of this since you have to purchase Genesis before using our themes.

Resources – http://www.studiopress.com/resources

Tutorials – http://my.studiopress.com/tutorials/

Code Snippets – http://my.studiopress.com/snippets/

FAQ – http://www.studiopress.com/faqs

Community Forum – http://www.studiopress.com/tutorials/community

Video Tutorials – http://www.studiopress.tv/

Old SP Forum (very valuable) – http://www.studiopress.com/support

That should cover way more than the basics! Let me know if you have any other questions or if you still need assistance with your logo.

Also, give this a try and see if it works –

background-size: cover;

Add this to your header image

Let me know if that works.

Since this is a background css image its probably best to just upload a larger image rather than a small one that will adjust. If you add “background: size:” your image will adjust with no problem when the browser is wide, but when its set at a smaller size the image won’t cover the entire space and it won’t look right. Which is why always recommend just adding a large image that can cover any browser size….or an image that can be repeated.

To set it to no repeat – background-repeat: no-repeat;
To center – background-position: center;
Image adjustment – background-size: 100%; …or background-size: 100% 100%; – this covers the top and bottom …..or background-size: cover; <-- Recommended if you're going to go this route You can do a Google search for Responsive Css Background Images for more info on different ways to do it.