I have a class that will be used by multiple DOM elements, of course..
I created the class .highlight and to each highlight div, I added an unique id to it.
.highlight {
height: 520px;
width: 100%;
padding: 0;
display: table;
overflow: hidden;
border: none;
}
.highlight#pixel {
background: url('../images/pixel.jpg') no-repeat center;
}
Each ID has it's own background-image via css. I would like to use the css property background: cover; to fill in all space with the image.
I thought it would work if you added the cover property to the div .highlight, because the id is added to the same div and so I don't have to add the cover property every time to each id in the css, but this doesn't work. Any thoughts why this is not working.
I speak about the following:
.highlight {
height: 520px;
width: 100%;
padding: 0;
display: table;
overflow: hidden;
border: none;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlight#pixel {
background: url('../images/pixel.jpg') no-repeat center;
}
Thnx!
background: url('../images/pixel.jpg') no-repeat center;
This is overwriting the background-size rule in the previous, less specific selector .highlight. Instead of using the shorthand in .highlight#<id>, you could use it to set background defaults on all .highlight elements, then be specific when declaring the image, for example:
.highlight {
...
background: no-repeat center / cover;
}
.highlight#pixel {
background-image: url('../images/pixel.jpg');
}
Using the background shorthand CSS will overwrite all background properties you have under .highlight. For your id specific divs, use the full background properties and not the shortand.
.highlight#pixel
{
background-image: url('');
...
}
for example.
Related
I am a beginner in html and CSS I was trying to modify my old project by adding a background image and I want the image to take the size of screen while remaining still while I scroll up or down
here is my code
'''
body {
background-image: url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1, h2 {
text-align: center;
}
.catphoto {
text-align : center;
}
'''
You can do this with the background-attachment property in CSS.
Example:
body {
background-image: url(https://picsum.photos/1080/1920);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 300vh;
}
.cover {
background-color: aqua;
height: 50vh;
margin-top: 90vh;
padding: 20px;
}
<div class="cover">
(covering up so you can see the effect)
</div>
This fixes the position of the background to a specific place, like an element with the position of it set to fixed. It can easily be ported to your code by adding a single line in the CSS.
background-attachment: fixed;
More information about background-attachment: MDN web.dev
This is a question, partially related to a previous discussion: Have a variable in images path in Sass?
I'm attempting to pass a logo image and apply an specific style to this logo through one of my labels on a twig file (quite similar to HTML) on a Symfony Project.
I fixed it with the background image, which actually is working, but the logo still doesn't appear anywhere... Could you help me with that?
Despite the background image is actually working, it gives me a warning...
`/* variables.scss file */
$footer-icon : url('image/'+ $customer +'/icon/footer-icon.svg');
$background-image : url('image/'+ $customer +'/'+'background.jpg');
/*****************/
/*_frontend-utils.scss*/
.beforeBackgroundImage {
overflow-x: hidden;
}
.backgroundImage {
background-image: $background-image;
}
.afterBackgroundImage {
background-position-y: bottom;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
/*****************/
/* frontend.html.twig */
<div id="wrap" class="beforeBackgroundImage backgroundImage afterBackgroundImage">
/*it works! =)*/
/*****************/
/*_footer.scss*/
.footerSecond {
display: block;
bottom: 0;
position: absolute;
height: 50px;
text-align: center;
width: 100%;
left: 0
}
.beforeFooterImage {
margin: 0px;
height: 48px;
}
/*I also tried with background-image...*/
.footerImage {
image: $footer-icon;
}
/*****************/
/*footer.html.twig*/
<div class="pull-left"class="opacityOne beforeFooterImage footerImage">
`
I could fix it by directly writing the image path inside the label, but I'd like to separate this from the code
<div class="pull-left"class="opacityOne">
<img class="beforeFooterImage" src="{{asset('bundles/app/img/footer-icon.svg')}}" alt="" />
Thanks in advance
I wish i never had to ask this but im confused.
So i have a basic background image on my div and for some reason when i set the background-size: 246px 70px; it does not work, only if i use !important it works.
.footer div.image-logo {
height: 70px;
width: 246px;
background-size: 246px 70px;
background-position: center;
background: url(/images/svg/five_Logo.svg) no-repeat;
margin: 20px auto;
}
Now basically you would think other css is overwriting it, well thats my rookie thought but it is not, when i inscpect the div with the background image, and click the tab "computed" to check the current state of the background-image-size it says background-size:auto;, and when i click on this to see where it gets the property auto it shows 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo which is the css where i set my background size to background-size: 246px 70px;.
I would like to be able to set the background size without using !important
The background shorthand includes background-size:auto and this is overriding your previous background-size statement.
Put the background-size statement after the background shorthand statement.
div {
width: 400px;
height: 300px;
margin: 1em auto;
}
.one {
background-size: 200px 100px;
background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}
.two {
background: url(http://www.placebacon.net/400/300) no-repeat;
background-size: 200px 100px; /* I win */
}
<div class="one"></div>
<div class="two"></div>
Syntax is;
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
Ex:
body {
background-image: url(photo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #ccc;
}
Therefore you might want to re-order. (Clear cookies as well)
I am having trouble getting background-size: cover; to work from my CSS file when specifying an inline background image via style="" tag:
CSS
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background: #cccccc;
}
HTML
<header class="hero" style="background-image: url('hero.jpeg');"></header>
If I add !important to background-size: cover;, it works properly. Why can I not get this to work without !important?
Try changing background: #cccccc; to background-color: #cccccc;.
As background is a shorthand rule, it will override some the of values you set earlier.
Initial value, as each of the properties of the shorthand:
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
You are overwritting all your background styles with background: #cccccc; because you are not specifiyng the background attribute, so you should change it by
background-color: #cccccc;
by this way the background color will work as color attribute and won't overwrite the others attributes
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details