0

My site's homepage has a banner image implemented with this CSS. Using a media query, the background image is set to scroll on smaller screens:

#banner {
    background: url("../images/banner1.jpg") no-repeat fixed left 13em / 100% auto rgba(0, 0, 0, 0);
    height: 47em;
    overflow: hidden;
    width: 100%;
}

/* Mobile */
@media screen and (max-width: 767px) {

#banner {
    height: 27em;
    background-attachment: scroll;
    background-position: left 7em;
    }

}

I want to make this an inline image, so it can be easily updated via my CMS. The designer says it has to be a CSS background image for the background-attachment property to be applied.

I suspect the CSS position property could be used on an inline image to get the same effect? Or is this a situation where the image has to be a CSS background instead of inline?

Jason
  • 1,167
  • 1
  • 9
  • 10
  • 2
    Background-image is probably the best implementation. But ask your designer to get the background image from your CMS, and print it inline as `style="background-image: url('image.jpg')"`. Or even use javascript to change the background image of the `banner` element. – KBN May 04 '14 at 10:34

2 Answers2

1

While it's better to use css for this but you may use a responsive image as well. Also you may use separate images with media queries, for example, create two images with different size for two different devices and keep one hidden and one visible, something like this:

// Common rules for both images
.banner {
    //...
}

#bannerBig {
    display:block;
}

#bannerSmall {
    display:none;
}

/* Mobile */
@media screen and (max-width: 767px) {

    #bannerBig {
        display:none;
    }

    #bannerSmall {
        display:block;
    }
}

Images:

<img class='banner' id='bannerBig' src='' />
<img class='banner' id='bannerSmall' src='' />

Also check this link for another solution. It would be better to discuss with your designer which one you should use.

Community
  • 1
  • 1
The Alpha
  • 143,660
  • 29
  • 287
  • 307
0

Yes you can embed image as inline image, use this tool to convert image to base64 format image

http://webcodertools.com/imagetobase64converter/Create

background-image: url(data:image/png;base64,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);
Rashmin Javiya
  • 5,173
  • 3
  • 27
  • 49