Working on a site that is just HTML and CSS. I am quite new with this. I have a header, body and footer that I would like to repeat to fill up the page. Think envato.com.
Here is some sample code I have so far.
CSS:
.blkside {
z-index:99;
background-image: url(/images/blkside.jpg);
background-repeat: repeat-x;
top:0px;
right:85px;
position: absolute;
}
the corresponding HTML:
<div class="blkside"><img src="/images/blkside.jpg"></div>
This is just one of the divs that I have. 3 repeat horizontally, and 1 repeats vertically. From my searching, this all looks correct code wise, but does not show up right. Any help would be much appreciated.
simple example below.
<div class="repeat"></div>
.repeat {
background:url(/images/blkside.jpg) top left repeat-x;
height:200px;
}
You need set measurements on the div (height/width) and once you define the image in the css you do not need to put it in the html as well
The code to repeat an image on the whole page background is:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url(full link to your image goes here);
background-repeat: repeat-xy;
}
</style>
</head>
<body>
</body>
</html>
Related
I am trying to design a web form in ASP.NET. In that I am trying to set a background color to different empty divs. Normally a simple html code like below works:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
But if I use this same snippet in ASP.NET, I fail to achieve the desired result. The browser displays nothing. My aspx code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
So how can I set a background color to an empty div in ASP.NET? Any help would be much appreciated. Thanks!
The problem is that your #headerand #nav-barhave percentage heights. You'll see if you change them to pxdimensions, they empty div's still show up. So your problem doesn't have anything with ASP.NET it's just a CSS issue.
If you want the heights to be responsive to the user's screen, you should try the vhtag. This stands for viewport height. So if you have 20vhfor example, it will take up 20% of the users screen height.
See my updated JSfiddle:
http://jsfiddle.net/0mr9z6hy/2/
percentage heights may work differently across browsers
but one problem is you have no height specified on the body so the height is only really the height of the actual content of your page which is not much.
html, body{
height: 100%;
}
I just started learning HTML in order to get a summer internship. I'm writing a HTML note page as I go through the tutorials from HTML.net and I have a question about putting a white box around the body of my text. I'm currently working on learning CSS, just finished the basics of HTML5, and I made my page have a blue background, but I would like the body of my text to be white so it's easily read. I have the text body centered at 800px
You can do this in numerous ways. I'll give you one answer, even though I have not seen your code. Hopefully, you can relate this to your own code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
background-color: blue;
}
.mainContent {
background-color: white;
width: 800px;
text-align: center;
}
</style>
</head>
<body>
<div class="mainContent">Show your text here.</div>
</body>
</html>
I'm using CSS to change the background color for different sections of the page. Good luck! I hope this helps!
If you meant the text-color by "body of my text", then it can simply be done as following:
body{
background-color: blue;
color: white;
}
For learning CSS, this sheet should be very helpful: http://overapi.com/css/
I would do it like this:
CSS:
body{
background-color:#your blue here;
}
.bodyText{
background-color:#fff;
width:1000px;
margin:0 auto;
padding:20px;
}
HTML:
<div class="bodyText">
Your text goes in here.
</div>
Obviously, adjust the width, padding, colors, etc. to suit your needs, but this should get you started.
Basically I am using the "Tryit Editor" from the W3 website and
this is the code I started out with
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
I wanted to change the background color and background images so that they were only found on a div, not on the whole page. I also wanted to move the div around the page. I was able to make the div with the background elements, but I wasn't able to move it around the page. I used the following code, thinking that
top:150px;
left: 150px;
would have caused the div to change position
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position=fixed;
top:150px;
left: 150px;
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#00dccc;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Alas, the div did not change position. What gives?
Thanks! :]
You have an equals sign rather than a colon in your position declaration which is causing the page to ignore it. Change that and it'll work!
EDIT: Thanks for fixing my awful terminology Pavlo, can't believe I did that :P
Your code is wrong. It should be
position: fixed;
When I test this about 30% of the lower part of the image is being positioned at top right.
I can't understand why.
If I for example positioned top left or top right it works fine.
It never works if I give positioned as in this example bottom right or bottom left.
If I give positioned bottom left then again about 30% of the lower part is being positioned at top left.
Here is the complete markup and css
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
body
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The image is at the bottom right of the body element, but the problem is that the element isn't as tall as you think it is so it looks like it's in the wrong place.
Add this to the CSS rules:
body, html {
min-height:100%;
}
You should declare height in css rule
body,html
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
height:100%;
}
#data-wrapper {
background:url("../images/repeat-bg.png") repeat-y 0 46px transparent;}
I want to start repeat-bg.png as a repeat-y but after 46px area from top of #data-wrapper. Is it possible to do like this?
You mean so that the top 46 Pixels have no background image?
No, that's not possible, sorry. You'll have to work around it, e.g. using another div with a margin.
You need to apply the background image to a containing div with 46px margin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#container {
background:url("../images/repeat-bg.png") repeat-y; margin-top:46px; height:600px;}
/* height:600px is only critical to the demo code and can be removed once the page has content */
</style>
</head>
<body>
<div id="container">
<!--All of your content goes here-->
</div>
</body>
</html>
In addition to this method, if support for this is not critical, you could be forward thinking and adopt the currently very under-supported CSS3 multiple-background declaration.
body {background:url("bg1.png") top no-repeat, url("bg2.png") bottom repeat-y;}