Remove/add header-image at breakpoint - Help please!

1

Hello all,

I am trying to work out how to add an image to my header bar when the breakpoint reaches a certain point - going up from mobile to tablet size.
The logo/site name would be left on the header and I’d like the new header image to float right in the header bar.

I cannot find out how to do this - as in actually add an image to the code at a certain break point. The img src code would have to be inside the html wouldn’t it? Whilst the media query somehow triggered its inclusion to the output page??

Any thoughts if this can be done with jut HTML and CSS or would I need to use some scripts?

THANKYOU in advance :slight_smile:

2

Are you able to share your code at all?

I would set the background image in a media query in CSS. This would have the added benefit of only downloading the image when needed.

3

thanks for the reply.
Can this background image be positioned within the header like a standard image - i.e. floated right and scaled to fit?
thanks :slight_smile:

4

Not by itself, no. What you can do is create a separate div with the background image you want, and change the display rule in a media query to show/hide it. Then you could float and resize that div all you want.

5

ahh right. So place the image within its own div then use media query with display:none?? Is this what you’re thinking of…
@media screen and (max-width: 650px) {
.element {
display: none;
}
}

Thanks very much :sunny:

1 Like