How can I add a top banner in CSS without touching or adding any HTML div?
Question
I would like to add a banner at the top of a website, but without touching the HTML file at all. Here is the CSS code for the banner:
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
and I also have this code in my CSS file
h2:before{
content:url(https://something.png);
margin-right: 5px;
vertical-align: 10%;
}
h1:after {
content:url(https://smething.png);
float: right;
}
and here is my HTML code which i am not able to touch it:
<head>
<title>A title </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
<body>
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>
<div id="footer">
<p>Thank you<a href="http://www.123.com/en">123</a></p>
</div>
</div>
</body>
</html>
I tried using ::before in the CSS file for the banner code but the picture before the h2 becomes up with the banner and i cannot separate them !! Can anyone please help me??!!
2 answers
solution1
0 2016-03-05 12:32:19
I hope this code can help: jsfiddle
h1{
margin-top: 10%;
}
h1:before{
content:"";
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
}
solution2
0 2016-03-05 12:41:58
Cat banner:
#content:before { content: ""; background:url(http://lorempixel.com/800/200/cats) no-repeat; width: 100%; height: 200px; position: absolute; top: 0; left: 0; } #content{ margin-top:220px; }
<div id="content"> <h1>header1</h1> <div id="test"> <h2>header2</h2> <fieldset> <legend>About You</legend> <p id="UserInfo">What is your name?</p> <div> <input type="text" name="yourname" size="40" /> </div> </fieldset> <div id="footer"> <p>Thank you<a href="http://www.123.com/en">123</a></p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I add an external javascript tag to an Ember JS app without touching the index.html?
how can I add a background image to my html inside a Div without adding more classes?
How can I tell if an image is touching the top of the screen?
How can I add custom columns for banner instead of column right, left, top and bottom?
How can i make this top right curved div in css?
How can I add link on the background banner?
How can I generate a random rectangle in a canvas without touching the lines?
How i can Get from Div Top and add to this div top + 25?
adding all elements within division and append it jquery without touching html
How can I hide a DIV without using CSS?
Related Tags