Inline CSS Background-Size Cover

inline css background-size cover

You need to use single style tag.

<div style="background: url(/thatscooking/FotoTC/FotoTC/ALWIN01.JPG) no-repeat center center;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover; 
            -o-background-size: cover;" 
    class="imgf ">
<div id="naamb"><p>Album Naam</p></div></div>

Use background-size on background applied via inline CSS

You can try by adding !important, for example

background-size:contain!important;

However, this is not the best option. It changes the size, but it would be better if you had real structure that you're using so you can get needed element via parent elements and would be able to do this without adding "!important".

Inline style for background image stretch

You've already tried this?

.yourclass{
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}

Try to set with px, not with percentage and see if it makes some difference.

Obs.: The demo link is broken.

How to show CSS background color on top of an inline style background image

You can simply use multiple background on the needed element:

.topback {  width:200px;  height:200px;}

<div class="topback" style="background-image:linear-gradient(to right,rgba(0,0,0,0.5),yellow), url('https://picsum.photos/500/500?image=1069') ; background-size: cover; background-repeat:no-repeat; background-position: center center; ">

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

Background image inline css Set properly

...hello please use 'background-attachment: initial;' instead of 'background-attachment: fixed;' or remove 'background-attachment' property and also use 'background-size: cover;'

Background image size in div tag - Full screen - Inline css

If the parent doesn't have a height, a percentage value on the children won't have an effect, because when you say height:100% that means 100% of the parent height.

.parent {}
.kid {  width: 100%;  height: 100%;  background-image: url('http://via.placeholder.com/350x150');}

<div class="parent">  <div class="kid"></div></div>

---

Related Topics