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>
Related
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
I'm building a website with AngularJS. And I'm using Plangular in order to create a customized Soundcloud Player. So I include my template like this :
<body>
<div id="container">
<div id="header" ng-controller="HeaderCtrl"><div ng-include="'templates/Header.tpl.html'"></div></div>
<div id="body" ng-view></div>
<div id=""><div ng-include="'templates/Player.tpl.html'"></div></div>
<div id="footer" class="center" ng-controller="FooterCtrl"><div ng-include="'templates/Footer.tpl.html'"></div>
</div>
</body>
So as you can see I got a header, a body and a footer. In the middle of it I got a player. I included the specific CSS file in that template and only in that template, but the CSS are in a way applied to my whole page. I need those css. ANd I thought that included the css only on that page would help, but it's not.
Thanks for your help guys !
Just prefix the CSS rules
Player.tpl.html :
<div class="player"> whatever </div>
CSS
.player .someclass {
}
.player .some-other-class {
}
<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.
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