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;
}
Related
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
i have a background image and i want to use it on my website but the problemn is i cant make it full height and width in any size, help me and please, check the codes below
current code, code #1 : haft and not full
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
height: auto!important;
width: 100%!important;
}
code # 2
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
background-color: white;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
i cant make it full width and height :( please help
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.stack.imgur.com/s0G3w.jpg);
height:100%;
width:100%;
}
<body>
</body>
Please try this
HTML
<body></body>
CSS
html{
width:100%,height:100%;
}
body{
background: url(../image.jpg) no-repeat;
background-size:cover;
height:100%;
width:100%;
}
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.
In my website and in this page I have a background image for my page. This background image must be fixed. This page works correctly in Firefox, but doesn't work in Google Chrome . the background image css is like this :
.aboutBG {
position: fixed;
width: 100%;
height: 100%;
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: 10;
}
I searched around the web and find some answers like this for using code like below :
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
but it doesn't work
You can not apply background image to div make some good logic
Your css should be looks like
html, body{
height: 100%;
width: 100%;
background-image: url(http://justbeecosmetics.com/img/headImage.jpg);
background-attachment: fixed;
}
#blank{
height:80%;
}
#top{
height: 70%;
background-color:blue;
}
#bottom{
height:50%;
background-color:red;
}
Please check the fiddle here
http://jsfiddle.net/jdmitz/V8WqE/
You have added to wrong position
Easier would be to add:
#container {
background-image: url(../img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
When i choose a image to put as a background of my div i can't manage to make it look normal. The width and height of my header are made with em. Can someone explain me how i can get a image as a background at my header when the header is like: 120em width. 5em height. So i need to make a normal header background the size of my header.
.header{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url('images.jpg');
text-align: center;
width: 120em;
height:5em;
background-size:100%;
}
.left{
background-color:red;
float: left;
width: 20em;
height: 51em;
}
.middle{
background-color: green;
width:120em;
padding:0px;
margin:0px;
height:51em;
}
.footer{
height:4em;
width: 120em;
background-color: blue;
}
Check here, http://css-tricks.com/perfect-full-page-background-image/
DEMO http://jsfiddle.net/yeyene/PtEnY/3/
#yourHeader{
float:left;
width:120em;
height:5em;
background: url(images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-background {
background: url(image/bg.jpg) no-repeat center/cover;
}
I think I understand what you are try to achieve, the above is what I use, just drop it on the highest level div where you want the background image and it should stay relatively "in frame" as the page scales. You way want to add a bit to this for compatibility but the above is the general gist.