When I use the following code the background image isn't being displayed are there any prerequisites to display a background image ?
<section class="starter"></section>
.starter
{
background-image:url("Assets/Images/Section.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
Here is a fiddle to your code:
http://jsfiddle.net/xywzx4uv/
(Note: I used another image and removed the broken comment)
.starter
{
background-image:url("http://lorempixel.com/output/nature-q-c-1244-102-1.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
It is working as intended, so there must be an error with the image-path.
Related
I'm a beginner in html and I am trying to use an image as a complete background to my page . I want the image to fit my sceen so that I do not have to scroll down to see the rest of the image. I have tried this but the image doesn't even load to begin with .
.html , .body{
margin:0;
height:100%;
}
#map{
background: url("HTML_FILES/IMAGES/map.jpg");
height:100%;
width:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div id = "map"></div>
My folder structure is like :
PROJECT
HTML_FILES
mypage.html
IMAGES
map.jpg
I would appreciate your help with guiding me to load the image and adjust it correctly . Thank you in advance .
.html , .body{
margin:0;
height:100%;
}
#map{
background-image: url(https://images.unsplash.com/photo-1495567720989-cebdbdd97913?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80);
height:100%;
width:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
top:0;
bottom:0;
}
<div id = "map"></div>
Use the below style to get it done.
body {
background: url(HTML_FILES/IMAGES/map.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I need help regarding background image size scaling.
code: http://codepen.io/AnilSimon123/pen/JRBRZa
here i have kept
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% auto;
height:700px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
}
As you can see the image has dimensions 588 x251 px.
I want the image to stretch along the width but keep its original height,all the while keeping the height of the container as 700px. The height of the image is dynamic.
Thanks and regards,
Anil Simon
Try using background-size: cover
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
min-height: 251px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
background-size: 100%;
}
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
background-size:100% 251px;
width:100%;
height:700px;
}
<div class="bgimage">
this is test
</div>
Use the background-size: cover instead background-size:100% auto;
background-size: cover :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Background cover works just fine.
background-size: cover;
But don't forget to add also the background-position to fixed and center.
For more details you can check https://css-tricks.com/perfect-full-page-background-image/
Hope it helps
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-attachment: fixed;
background-position:top center;
background-size: cover;
-webkit-background-size: cover;
height:700px;
width:100%;
color: #fff;
text-align: left;
background-size:100% auto;
background-repeat:no-repeat;
}
i think this is what you want
Try adding a container around your div with a height of 700px and add the bgimage on another div that is positioned absolute(so it doesn't affect anything else), height 251px and z-index:-1 to send it to the back. Also to stretch it set the background size to 100% 100%. Hope this helps
.container{
height:700px;
width:100%;
}
.bgimage{
margin:0;
position:absolute;
z-index:-1;
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% 100%; height:251px;
width:100%; background-position:top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="bgimage"></div>
this is test
</div>
.bgimage {
background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top;
width: 100%;
height: 700px;
background-size: 100% 251px;}
I have this site
https://preview.c9.io/pgonzalez/demo-project/html/test.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
The logo at the top is an image, I'm using this technique
h1{
position:relative;
}
span{
width:100%;
height:100%;
position:absolute;
background-image:url(Images/headertext.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<h2>
<span></span>
The rainy season
</h2>
</header>
and it works as I expect. However, the same technique doesn't work here
https://demo-project-c9-pgonzalez.c9.io/html/API.html
You will see how the background image shows twice and in a completely different position, the code I'm using is the same
h1 {
position: relative;
}
span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
Can't figure out what is causing this. Thoughts?
It is because there is another span on the page.
You want:
h1 span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
}
And probably want to reference it more specific than that. You CSS will add that background to ANY span on the page. What I posted above will only affect spans that are children of h1 tags.
This is because one page header is defined as such, which doesn't work:
#headertest{
position:absolute;
width:100%;
height:100%;
background-image:url(../Images/developerstitle.png);
background-repeat:no-repeat;
}
And on the other page that this technique does works is defined as:
header{
color:white;
background-color:black;
padding:10px;
text-align:center;
background-image:url(Images/headerbackground.jpg);
background-attachment:fixed;
background-position:center;
}
My guess is that the Position statement must be changed/removed.
All right so i have got an image inside a slider and it does not scale properly.
It is first small and then stretches.I want it to be stretched all the way through.How can this be achieved?
Have a look at the screenshots(ignore the red in second screenshot):
And the css:
.slider-wrapper {
width: 310px;
height: 580px;
background: url("images/S4.png") center center ;
background-size: contain;
background-repeat: no-repeat;
}
.nivoSlider {
position:relative;
width:268px;
height:474px;
top:51px;
bottom:0px;
left:21px;
right:23px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:268px;
height:474px;
}
And a link to the page:
http://oneapptheme.github.io
You can try this :-
.nivoSlider3 img{height:100% !important;}
use in the css file of image...
background-size: 100%;
I would like to put an image into a circle.
My code works fine, but if the image is so big, image is not resizing and i don't see anything in the circle.
How can i automatically resize the image to put it into my circle ?
Here is the html code :
<div class="roundedImage" style="background: url(img/desktop/personne.jpg) no-repeat 0px 0px;">
</div>
And here is the CSS code :
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
And now, here is the result :
To let the background-image fully fill the space that is available you can use background-size: cover;:
.roundedImage {
background: url(http://placehold.it/50x50);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
Note that i've added the inline style in the css code.
jsFiddle
Use CSS property background-size to set the size of the image set as a background in your div:
.roundedImage {
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
background-size:90px 0px;
}