Image left from the page content

I have created a screenshot as an example of what I am trying to do:
Screenshot

Hi CoN73mP7,

Why don’t you use a widget? This way the image will have a “real” dimension.

Cheers

Hi,

because out of the box the template twenty thirteen has only one sidebar and I’m already using that sidebar on the right side for other content.

Is it possible to define another sidebar, that vanishes if the space is not available? And other than the sidebar on the right side, the left one shouldn’t have a background other than the image.

Alex

Well, yes, but a widget that vanishes when the space is not available is a very specific thing, and I don’t know any existing widget that would do it (I’m not saying there isn’t one that will do it, just that I don’t any widget freely available that will do it). So you might have to code your own widget…

Or you could add a responsive background image that vanishes when the size of the page is less than X. That could do the job.

That sounds good. Do you happen to know how I could do that?

Alex

Add a media query to the element you will apply your background, like:

@media(min-width: Xpx){
    element {
        background: url(image) no-repeat;
    }
}

@media(max-width: X-1px){
    element {
        background-image: none;
    }
}

Hi, I have just tried this, and it works great.

Thank you very much.

Alex

No problem.