This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 7 years ago.
I'm trying to add two backgrounds in CSS but one image to fill the entire background and the other to be aligned on the centre right of the page. Here is a section of my current StyleSheet:
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
I've tried separating the URLs with a comma and then separating the positioning by comma but this doesn't work. Any ideas?
Set the height of the parent element to 100% i.e. to html. Then used the cover value of background-size to occupy full space of the underlying image. Set right center to the 'background-position' of the first image.
html,
body {
height: 100%;
}
body {
background-image: url("http://placehold.it/300x300/333"), url("http://placehold.it/1200x1200");
background-position: right center, center center;
background-repeat: no-repeat;
background-size: auto auto, cover;
color: #384047;
font-family: "Nunito", sans-serif;
height: 100%;
}
CSS3 supports multiple background images;
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center center, left top;
background-repeat: no-repeat,no-repeat;
}
refer http://www.css3.info/preview/multiple-backgrounds/
You can see this tutorial : http://www.css3.info/preview/multiple-backgrounds/
example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
Refer this.it will help you...
body {
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center right, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
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 question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
So I have that small white space after the image, how can I fix that?
Here is code of my class:
.hero-image2 {
background-image: url("/assets/kava.jpeg");
width:33%;
right:0px;
position: fixed;
min-height: 100%;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-repeat: no-repeat;
bottom:0px;
}
And here is the other class which is on left side:
.tekst2 {
width: 67%;
position: absolute;
left: 0px;
height: 100%;
font-family: 'Playfair Display', serif;
font-size: 15px;
}
Here is what it looks like:
enter image description here
You can give negative margin bottom value for example margin-bottom=-30px;
My CSS background-image not fulfill the bottom of my webpage, there are still some white space on the bottom of my webpage, how can I fulfill the webpage with my background image?
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
background:url('semi_buffet.jpg');
background-repeat: no-repeat;
background-position:center center ;
background-size: cover;
font-family:"Times New Roman", Times, serif;
}
you could try,
object-fit:contain;
or,
object-fit:cover;
I believe your code should be working but try this:
body {
background-image: url('https://images.unsplash.com/photo-1531490744426-b6fc85d35692?
ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4d73c712fdb8799f077d7c2f77af115&auto=format&fit=crop&w=2467&q=80');
background-size: cover;
background-repeat: no-repeat;
}
in the .CSS File:
when i apply
body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100% 100%;}
the background-image:url('Images/Login_Background.jpg'); works fine
But as soon as i make a id like:
#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}
and when my <section id="login"> uses this css id; the background: url('Images/Login_Background.jpg'); style doesn't works!!!
Am i going wrong somewhere which i am not able to spot? Got tired from this!!!
Replace
#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}
with
#login {
background-image:url(Images/Login_Background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}
It Should Work Fine...!!
not sure what is the result you are expecting but you can't see the background in the div
because of the background-repeat: no-repeat; property, here is a demo without it: http://jsfiddle.net/dBRQw/
height of the element, keep in mind that an empty div has the height of 0px (unless you specify a value for it or it has content in it) and in this case you won't be able to see the background, like here: http://jsfiddle.net/dBRQw/1/
and this probably creates the issue, as you also use the background-position: center center; property that sends your 100px sized background to the center of that element
http://jsfiddle.net/dBRQw/2/
I have set the width and height of the div to 900px so you can see the background at the center. To sum it up, your issue might be because your element has no height or has no content in it that makes him as 0px height by default.
hope this helps you.
I am trying to create a header for a website. What I am trying to do is repeat a background image all the way across my page for the header background. This image is 1px wide. On top of that image I want to center another background image on top of the previous and have it centered and no repeating. The second image is the logo of the site and the title etc.
With the below code I get the top layer not centered and repeating with the bottom layer.
.mainHeaderBottomLayer
{
background-image: url("images/header.png");
background-repeat: repeat-x;
height: 107px;
text-align: center;
}
.mainHeaderTopLayer
{
background-image: url("images/headerLayer.png");
background-repeat: no-repeat;
width: 1200px;
margin: 0 auto;
}
Here is the html
<div class="mainHeaderBottomLayer">
<div class="mainHeaderTopLayer"></div>
</div>
Anyone know how this can be done?
background: url("images/headerLayer.png") no-repeat center top #fff;
or
background: url("images/headerLayer.png") no-repeat 50% 0 white;
.mainHeaderTopLayer {
background: url(images/headerLayer.png) no-repeat center top;
width: 1200px;
height: 200px;
margin: 0 auto; }
Just center the image via the background property and position attributes.
Based on comments above you need a height attribute as well....
Use background-positioning to align the logo:
.mainHeaderTopLayer
{
background-image: url("images/headerLayer.png");
background-repeat: no-repeat;
background-position: center center;
width: 1200px;
margin: 0 auto;
}