Dynamic Full Width Background Images

[seansean11]

Hey Guys,

I’m stuck on this right now, and can’t find any good resources on best practice. Here’s my situation:

I’m setting up WordPress sites for clients and want to make things as customizable as possible, so in the case of full-width background images, I want the clients to be able to control what is displayed. Typically I want to load images that are over 1300px so that they don’t look awkward on bigger screens. The difficulty is that I can’t dynamically load the image as a background property in my css file. So, I’m left with 2 options as I see it.

-Dynamically load the image into some inline css that utilizes the url of the field in the background property. Then, center this image utilizing background-position. *This is the option that I have not tried yet

-Dynamically load an inline img of this background and then use the absolute position centering trick (position:absolute, left:50%, margin-left: -(1/2 of image width)).

I have only tried option #2 and it works fine other than the horizontal scrollbar that is created because the image is wider than the browser window. I tried setting the parent element to overflow: hidden and it has no effect. The only way I’ve found to get horizontal scrolling to disappear is to set overflow: hidden on the html element, which essentially would remove the vertical scrolling also.

What do you all use in this situation? and do you know why option #2 isn’t working for me?

Thank You,

Sean

[Paulie_D]

I’m no expert on this but I feel a JS solution coming on to change the CSS on your body tag

[seansean11]

Thanks @Paulie_D, I think I figured out the absolute positioning problem though. The img was absolutely positioning relative to the HTML element, because none of its containing elements were set to position: relative. Once I set the body element to relative, the overflow: hidden that was applied to the body element worked. This might not be the best solution though, because you might need horizontal scrolling at certain points (can’t think of a good example…maybe less relevant with responsive). It would probably be better to set a 100% width div.hero (or whatever you want to call it) as a parent element, that has the properties position: relative and overflow: hidden.

I’m still curious about how people go about doing this now a days, and which method they use? Inline CSS bg-image or an inline image with this absolute positioning solution? Maybe I’ll make a blog post about it once I get more info.

[Paulie_D]

I doubt if anyone many people use an ‘inline css bg image’ when it can be so simply updated from a css stylesheet.

An ‘inline image’ would be even worse.

[seansean11]

@Paulie_D, we were talking about dynamically calling images via WordPress (for clients that wouldn’t open CSS files). I think those are the only 2 options, and I was hoping to get more feedback about this. You cannot dynamically call css into your stylesheet, which was the crux of my post.

Look here http://stackoverflow.com/questions/11303891/how-to-have-dynamic-image-as-css-background. They all suggest using inline styling, but I don’t see why using an img element (absolutely positioned to center) would be worse. I know the bg image might not be considered content, but we do it all of the time with image sliders, so I don’t see why it’s such a bad idea.

Anyone have some other solutions/comments?

[Paulie_D]

I’m not suggesting letting a client change a css stylesheet but surely it can’t be beyond the capabilities of WP to upload an image, rename it to bodybg.jpg (or whatever) and that would be already referenced in the stylesheet.

Or is it, I dunno, I’m not WP guru.

I assume that by change the ‘inline image’ that they have access to the HTML…how is that really any different to letting them change the CSS?

>I know the bg image might not be considered content, but we do it all of the time with image sliders

An image in a slider is CONTENT being displayed, a bg image to a body or div is STYLING…the two are quite different IMO.

[seansean11]

@Paulie_D that is an interesting idea about having the file be automatically renamed in the WordPress backend and overwrite the previous file.

With that being said, the whole idea of using the CMS is that you write the php that outputs the html. The client sees a nice pretty “upload your image here” in the WordPress admin panel (via custom fields or featured image). The client enters their image, WordPress crops and resizes and it magically appears in the outputted HTML on the page because you told it to output in that way (and you’re a magician). I’m sure you already know that though.

In my particular case, which I believe will arise again in the future, the image is a jpg image of a landscape that is full width and covers most of the top of the page, with other elements- such as h elements or divs or buttons displayed over top of it (pretty popular these days in web design). I particularly see these types of images in full width image sliders (which also cover the background of the top of the page) and also seem to be very popular. Example: http://yogafoster.com/

My question still stands though, if other people do end up reading this, what methods do you use to dynamically call these types of images.

[djdaniel150]

Alright, start by implementing the “background-size: cover;” property in CSS. This will instruct the browser to attempt to stretch the image as far as possible to fill both horizontal and vertical axes. You stated your image is 1300px correct? You don’t need to set a position for a background image in the body it will center itself, although the image may not appear the way you want it too on alternate screens. I used an image this last week that is 1024×768 and it renders perfectly on all screens from my Samsung Galaxy phone up to my 1366×768 15.4in laptop, up to my 27in desktop widescreen monitor at 1900x1024px. I think “cover” attribute is your solution. You may need drop the dimensions of the image to around that 1024×768 if possible. You will also obviously get better quality but use more bandwidth with PNG’s vs JPG’s. There is also the “contain” attribute as well, which will attempt to stretch an element to fill an entire area, like say a CSS ID you specified at maybe “width: 40%; height: 35%;”, etc, or with pixel values as well. The “cover” and “contain” attributes are very flexible and fluid in their nature.

I also used contain for my sites banner, and it scales larger or smaller depending on the size of the screen, or if someone activates a toolbar in their browser, etc, hence “flexible.”

[Paulie_D]

>You don’t need to set a position for a background image in the body it will center itself.

Actually it won’t…it will default to top & left.

Background-cover will certainly stretch the image but it won’t look **that** good at 1920px unless it’s high quality.

[seansean11]

Thank you @djdaniel150, I do know about using background-size: cover, and that is a very viable solution, because I really could make the image that loads any size (as I have the original jpg). I should have added this technique to the original post.

But the real question still remains…Since this img is loaded through CSS, how would you load it dynamically? Would you add it through inline CSS (which would be served through PHP that communicates with the WordPress admin)? or is there a way to dynamically generate this image into your stylesheet?

[djdaniel150]

Oh boy, lol. I’m not sure to be perfectly honest with you. I do have word press blogs, but I’ve been coding my own sites for so long that I never had a reason to script anything other than social networking apps, etc.

Honestly, I wouldn’t load anything dynamically, because scripts hinder the ability of search engines to index content. This is why I quit using javascript almost altogether back 4 years ago. Scripting also kills your pages by making them slow to process. While wordpress might seem easy to use, it also produces tons of unnecessary and unreadable code half the time. Anything “dynamic” on the web is bad news! This goes for dynamic URL’s as well. Google still states to this day that we should be building “static” pages, and this is for good reasons. Its OK to script in your pages, but your pages and overall sites structure should never be enclosed in scripts! Scripts should placed in HTML, not HTML in scripts. PHP, JSP, javascript, etc, these are all proprietary technologies, not standards. Definitely consider this. Yeah, it turns out that “dynamic”, isn’t really all that dynamic at all. Yeah, you defnitely shouldn’t be trying to script, but instead following the standards and sticking with HTML and CSS.

Yeah, I would stick with the “background-size: cover” or “contain” and let the browser handle scaling of the images. It really does work well.

[Anonymous]

Have you considered using Backstretch?
http://srobbin.com/jquery-plugins/backstretch/

[seansean11]

Thanks @aarongmore that is a really interesting solution that I had never heard about. I’m going to look into making that an easily editable input through the CMS for the client and incorporating it into the site.

But, have I gone mad @djdaniel150. I’ve only been doing this professionally for almost a year, but I DON’T know any web company that only makes clients static websites anymore (unless they are never meant to be edited). I’m sure making things “dynamic” on a site requires a bit more of loading time, but how will the client ever be able to control content without a CMS. I have plenty of friends that also work in the industry (with different companies) that also always present CMS driven sites (whether it be WordPress, Expression Engine, Drupal, or there own custom CMS). Honestly I don’t think anyone would have hired me if I didn’t know how to develop well with one of these systems. I know there are tools like Jekyll that will help you create a static blog, but according to Chris and Dave on Shop Talk Show, it may be too difficult for your typical client to learn.

But back to the topic. I’m interested in figuring out more solutions. Here’s a [site](http://www.stowe.com “”) that used the dynamic inline CSS technique.

[djdaniel150]

I agree Sean. Clients want something that is simple to manage, and a CMS is necessary here. But CMS’s also make coding much more difficult because now you have to play with their code. Nonetheless, I wasn’t telling you not to use one, I think you misunderstood what I was stating. I was just stating what the implications of them are, that’s all. Nonetheless this has nothing to do with the problem you stated.

Comparing web designers is like comparing fingerprints in that no two are alike. I’ve looked at thousands of people’s code over the years, and none is the same, not so much as one. You want these images “dynamic?” what exactly are you trying to do? You want the images to render appropriately at different resolutions, screen sizes? If thats the case then just do what I stated to begin with, “contain”, or “cover.” Thats all you have to do. And then test the pages on multiple resolutions. My pictures render fine on my Galaxy sII or my 27in widescreen monitor, and anything inbetween. As far as the dynamic thing goes, you didn’t state what you meant by that. If you meant an image that adapts to the resolution, thats the answer I gave you.

You can change the image resolutions with paint.net or photoshop till you get it right.

[Author]

Posts