<body>
<div>
<div class="page1">
</div>
</body>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
This is my code for setting a background image for a webpage, but unfortunately it's not displayed. Can someone help me correct this code?
Ok I understand now, you need to do
html, body{
height: 100%;
width: 100%;
}
Background is not showing because your div needs content.
2 options:
You can set the background for body instead.
body{
background-image:url(../images/1.jpg);
}
Or set the height of the div to the height of the image
First of all you need to put a closing </div>
<div>
<div class="page1"></div>
</div>
The problem now is tha your <div class="page1"></div> is emptry. You need to put some elements inside so that the image can be displayed.
DEMO
Maybe you html document is not well formed.
Try this:
<html>
<head>
<-- style block have to be contained within a <style> tag -->
<style>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center;
width:100%;
height:100%;
display:block;
position:relative;
}
</style>
</head>
<body>
<div>
<div class="page1">
</div>
</div> <-- this tag was missing in your question -->
</body>
Second possibility, your image is not properly linked. The way it is written, it is in a folder 'images' parrallel to the one you html document is hold. So, find what relativity there is between your document and the image and try modifying it's source url(../images/1.jpg); .
When defining the path to another object, I find it easier to define the file path using ~/f1/f2/file rather than trying to work from the current directory using ../f1/f2/file. What the ~ indicates is to start at the top level directory and work its way down the file structure. Much easier.
Related
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>
I am newbie so don't mind my question.
I am trying to insert an image using css bt it doesn't show in the page.
Here is my code :
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
and my css is :
#outerWrapper #header #wave{background:url("generic/wave.png") bottom left no-repeat;position:absolute;top:0;left:0;width:960px;height:193px;z-index:100;}
The image path is correct. So help me please :)
Bilal Zafar, created files with your code, it worked for me here, here the link with the test neows.com.br/imagem-bg.rar might help you.
If you have recently modified your css file, try clearing your cache as sometimes the old css file is saved.
Your code works for me.
Sometimes a file extension will be uppercase, you may want to double check that.
Here is my source:
<html>
<head>
<style>
#outerWrapper #header #wave{
background:url("PathToImage.png") bottom left no-repeat;
position:absolute;
top:0;
left:0;
width:960px;
height:193px;
z-index:100;
border:1px solid black;//This is to make sure the size of div and position of background image are correct.
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<div id="wave">
</div>
</div>
</div>
</body>
</html>
i have a problem, I have two div:
is a image and also its written first in the html code
is some text, written after the first div
now I have the problem: I see the first div over the second div this means I dont see the text.
I thought that if I write the second after the first I will se the second over the first.
is this normal? any solution?
Is this what you looking..?
<html>
<body>
<style>
#div_1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<div id='div_1'>
<img src="https://www.google.co.in/images/srpr/logo3w.png" >
</div>
<div style="color:#0000FF" id='div_2'>
<p>This is some text.</p>
</div>
</body>
</html>
You can try investigate the css property z-index
I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div