#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;}
Related
I'm developing chrome extension, I want to make border radius and use radius border propery in css, but it boder in child elemement.
My code html here :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="border-radius:10px">
<head>
</head>
<body>
content here
</body>
</html>
I want border as picture below :
http://postimg.org/image/8ct4dcq93/
Unfortunately, I don't think you can do it.
The frame around the popup page (highlighted in red in a graphics editor) is fully controlled by Chrome:
You can't change its shape / color, just like you can't change normal Chrome chrome (pun intended).
There is one to make the popup.html border-radius that to add another Div container to popup HTML, set the body background to none and give the background color to the div container. After that, you can give the radius to the container.
e.g
body {
background: none
}
.container {
background: green;
border-radius: 10px;
width: 50%;
height: 100px;
text-align: center;
}
<body>
<div class="container">
The content is here....
</div>
</body>
Your supposed to style the html tag, not the body tag.
html {
border: 5px solid rgb(200, 200, 200);
}
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="popup.css">
</header>
<body>
<h1>Hello World!</h1>
<script src="popup.js"></script>
</body>
</html>
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%;
}
I'm trying to create a border inside an image instead of outside of the image. I want to do this because I would like to put some alpha value on the border so that i can see the image through the border.
I tried placing a div a few pixels smaller than the image around the image and then setting "overflow:none". The border is now inside the image, but when i apply alpha to the border nothing can be seen through the border because overflow is set to none.
On the other hand. If i don't set "overflow", then the border won't show up.
I want something like this:
Tested in firefox and ie8 (no opacity yet in ie8, but you can use a filter for that):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.imgcontainer{padding:0; position: relative;
display: inline-block; overflow: hidden;}
.imgcontainer img{display:block;}
.borders, .borders2{position: absolute; width:100%; height:100%;
border: 4px solid #000;}
.borders{opacity: .5;}
.borders2{bottom: 4px; right: 4px;}
</style>
</head>
<body>
<div class="imgcontainer">
<div class="borders"><div class="borders2"></div></div>
<img src="img" />
</div>
</body>
</html>
This creates a 4px transparent border, but that can easily be changed.
Because the opacity only affects the absolute positioned divs the image doesnot become transparent. Two border-divs are needed in this example because this way the image size is variable, if your images always have the same size you could do this with only one.
jsfiddle: http://jsfiddle.net/Xb37w/2/
You can use a wrapper with negative margins and rgba(255,255,255,.5) as border-color.
Specifically, I am referring to a situation where you need to have a total width of say 100% on a DIV, but a 10 pixel padding and 1 pixel border. (And don't rely on the browser automatically setting it to that width — say it's floated left for instance.)
Is there any simple way to accomplish this without using JavaScript?
No, there's no way to set this on one element that works with the currently major browsers.
You could use 2 nested divs. Set the 100% width on the outher div, and set the padding and border on the inner div.
If you use box-sizing: border-box you can set width: 100%; border: 1px solid black; padding: 10px; and the total of the width, border, margin, and padding will be what is specified for the width. Source
EDIT: True, browser support is a bit limited. FF 3.5 and Safari 4 support it, not sure about IE8 or Chrome.
What about the following solution?
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.content .outer{
width:100%;
border:1px solid black;
background-color:green;
}
.content .inner{
margin-left:10px;
margin-right:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="outer">
<div class="inner">
<p>Hi!</p>
</div>
</div>
</div>
</body>
</html>
Update
OK, doesn't accomplish what you are talking about with just one element.
That's only possible with CSS 3.
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>