I currently have my background set to top right as:
#thedivstatus {
background-image: url("imagestatus.gif");
background-position: right top;
background-repeat: no-repeat;
}
BUT! I need to add a margin-top:50px; from where its rendering via above. Could anyone give me a suggestion?
Thanks
If you mean you want the background image itself to be offset by 50 pixels from the top, like a background margin, then just switch out the top for 50px and you're set.
#thedivstatus {
background-image: url("imagestatus.gif");
background-position: right 50px;
background-repeat: no-repeat;
}
background-image: url(/images/poster.png);
background-position: center;
background-position-y: 50px;
background-repeat: no-repeat;
working in Navbar adding an image in GrapesJs.Display Image in Split
.gjs-block-navbar1{
width: 100%;
height:auto;
background-image: url("./assets/images/navbar/navbar-1.png");
background-repeat: no-repeat;
background-position:center 0px;
background-size:cover;
}
In Sidebar image fix to display center and clear
#div-name
{
background-image: url('../images/background-art-main.jpg');
background-position: top right 50px;
background-repeat: no-repeat;
}
Related
I'm trying to set multiple background images on my body.
In order to do so, I made this which works, but isn't really doing what I want.
body { background-image: url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100');
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: center,right top,left top;
background-size: 80%,110px,110px;}
As you will see, there are three images, one to the center, and two others on the sides.
In fact I would like to have the center image with the property repeat in order to really cover the entire body. But If I do that, the two others backgrounds seems to be hidden by the center one. I would like to have the two others backgrounds coming in front of the first center background.
I want also the sides background to be sticky, but this is the next step.
Try this :
body {
margin: 0;
background-image: url('https://picsum.photos/100/100');
background-repeat: no-repeat;
background-position: center,right top,left top;
background-size: 100%;
}
body:before{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: left;
}
body:after{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: right;
}
Currently, I create a 1288x200 image (https://jstock.org/images/banner.png).
I want it to shown as 100px height banner. The reason I'm using 2x height, as I want it to look good in retina display.
As you can see in current outcome, it doesn't look good - https://jstock.org/
I try to change from
.banner {
height: 100px;
background: #3B3E44 url('images/banner.png');
}
to
.banner {
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: #3B3E44 url('images/banner.png');
}
But, the outcome is still the same.
Can anyone provide me some hint, on how to scale down the background image proportionally?
you set your background-size to contain so it contain your image in your height
.banner {
height: 100px;
background: #3B3E44 url("https://jstock.org/images/banner.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="banner"></div>
how can I add to section responsive background image 100% height? Now I don't have any image.
<section class="takecare">
</section>
takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I think there is a typo mistake.
Your css should look like
.takecare{ background-image: url("images/craft.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
I suggest you to add the element 'section' before the .takecare in case you want to add some things in this section and customize them without adding a ton of classes and id for nothing.
section.takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Btw the answer of Amab is good, this is just some recommendation.
Greetings.
height: 100% doesn't work with if parent node doesn't have a fixed height. Try to add a fixed height like:
.takecare{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/34/70_Years_Porsche_Sports_Car%2C_Berlin_%281X7A3888%29.jpg");
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<section class="takecare"></section>
I try this, and is not woking:
body {
background-image: url(images/bgr.jpg);
background-position: 156px, right;
background-repeat: no-repeat;
}
is there a way to make this working?
Simply remove comma.
body {
background-image: url(images/bgr.jpg);
background-position: 156px right;
background-repeat: no-repeat;
}
you need not comma here:
background-position: 156px, right;
right is:
background-position: 156px right;
How do I keep the background image fixed during a page scroll? I have this CSS code, and the image is a background of the body and not <div></div>
body {
background-position:center;
background-image:url(../images/images5.jpg);
}
background-attachment: fixed;
http://www.w3.org/TR/CSS21/colors.html#background-properties
background-image: url("/your-dir/your_image.jpg");
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
Just add background-attachment to your code
body {
background-position: center;
background-image: url(../images/images5.jpg);
background-attachment: fixed;
}