![an aeroplane ][1]
#top
{
background-color:maroon;
width:100%;
height:110px;
background-image:url(im.jpg);
background-repeat:no-repeat;
}
I want the picture to fix in the banner. But I have no idea how to achieve this.
<!doctype html>
<html>
<head>
<style>
#sample{
background-color:maroon;
width:100%;
height:110px;
background-image:url(im.jpg);
background-size: 100% 110px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id='sample'></div>
</body>
</html>
Related
I have a black overlay on the image and disabled image hover, I know it is stacked on the image but how I can solve this? I wanna hover the image and grayscale change from 1 to zero and overlay still there, my code down below
thanks for your help.
.box{
width:300px;
height:200px;
position: relative;
}
.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}
.image:hover{
filter:grayscale(0)
}
.black_layer{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:black;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="box">
<img src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image" />
<div class="black_layer"></div>
</div>
</body>
</html>
Instead of hover on the image (what will never work because of the black layer on top of it), hover on the container .box and than target the content image:
.box:hover img{ .... }
(note: changed the backgroundcolor of the top layer to yellow to make the effect more visable)
.box{
width:300px;
height:200px;
position: relative;
}
.image{
width:100%;
height:100%;
object-fit: cover;
filter:grayscale(1);
}
.box:hover img{
filter:grayscale(0)
}
.black_layer{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:yellow;
z-index:1;
opacity:.3;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="box">
<img src="https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" class="image" />
<div class="black_layer"></div>
</div>
</body>
</html>
I would like to place the middle portion div on top for a #media query -- and then I would like to stack the left portion and right portion divs below it side by side for a responsive and clean looking design, possibly for mobile as well.
Here is my code -- any help would be greatly appreciated! Thanks.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="needhelpagain.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">
<title></title>
</head>
<body>
<header></header>
<div class="container">
<div class="left-portion"></div>
<div class="middle-portion">Blank Content</div>
<div class="right-portion"></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#1a0000;
}
.container{
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
}
header{
padding:50px;
background-color:#000000;
}
.left-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
}
.middle-portion{
width:56%;
height:100%;
float:left;
background-color:#ffffff;
color:#000000;
font-family:'old standard tt';
text-align:center;
}
.right-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
font-family:'vollkorn';
}
You may be able to get away with making the div on top you have it labeled as left .. Make that 100% width then the other 2 divs set as 50% and the set all of the divs in the container to position relative. And the bottom divs to float left.
<style>
.container{
height: 1200px;
width: 100%;
}
.container div{
position: relative;
}
.topDiv{
width:100%;
height:100px;
}
.botDivs{
width:50%;
height: 200px;
float: left
}
.green{
background:green;
}
.red{
background:red;
}
.blue{
background:blue;
}
</style>
<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>
Why is there a margin in the ul? The navbar goes directly below and out of the header when I float left or right. If I remove Ul it doesnt drop below. I dont understand it. How do I fix it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
}
ul{
margin:0;
padding:0;
width:25%;
float:left
}
li{
display:inline;
}
There is no margin on the UL, it just appears that way as it is inside your container, which has margin: auto on it, which centers the #container element on your page and has 80% width.
Move your nav outside of the container if you want it to float to the left of the body, or use:
position: absolute;
left: 0;
width: 100%;
instead of floating it and it will go to the left of the nearest relative container (in this case the body as nothing is set with position: relative.
EDIT: Also, your links are not structured correctly:
<li>NAV1</li>
Should be: <li>NAV1</li> if you want NAV1 to be the text of the link
It's not about margin,because there is no margin, there is not enough space of ul. Im not sure what do you want to achieve but u can remove width: 25%; from ul.
Try this way.
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
overflow: auto;
}
ul{
margin:0;
padding:0;
width:100%;
float:left;
}
li{
display:inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I created a web page image fills the screen 100%.
but, Problems occurred.
I want to fill up the picture on a Web page, as shown below:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') center;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>
The results came out, there are some problems.
Without being tightly filled, the image is repeated.
I want a solution.
I want delete "This part":
You can add this style
#top-slogan{
background-repeat: no-repeat;
background-size : cover;
background position : center center;
}
You can add no-repeat. Then it won't repeat.
" background-repeat: no-repeat;"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
repeat:no-repeat;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>
You can scale this image by setting it's width and height .
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
background-size: 100% 100%;
repeat:no-repeat;
}
Try this One
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') no-repeat center;
background-size :cover;
}
I want to make a container in the middle of the screen and put some div itmes in.
I want sth like this.
I stripped down the html to its essentials for you people.
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Webshop</title>
<link href="../css/boilerplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content {
position:relative;
width:200px;
height:115px;
background-color:#F00;
top: 900px;
margin:10px;
padding:10px;
display:inline-block;
}
#container {
max-width: 960px;
background: #FFF;
margin: 0 auto;
min-height:100%;
height: auto;
padding-top:0;
padding-left:1em;
padding-right:1em;
padding-bottom:0;
}
</style>
</head>
<body style="background-color:#CF6" >
<div id="container">
<div id="content"> </div>
<div id="content"> </div>
<div id="content"> </div>
</div>
</body>
</html>
The result is awful.
I dont really understand, what you want but have a look at this :
http://jsfiddle.net/u7k6cyf5/
#content {
position:relative;
width:200px;
background-color:#F00;
margin:10px;
padding:10px;
display:inline-block;
}