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;
}
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 am trying to create a responsive header that has two adjacent background images, split diagonally.
The placement of the angle should be adjustable like so:
Most of the ways that this can be done result in the background image becoming skewed, using transparent borders that are not responsive or using clip-path, which unfortunately lacks browser support for ie.
.one,
.two {
flex: 1 1 auto;
}
.spotlight {
height:350px;
overflow:hidden;
}
.one, .two {
background: url(https://via.placeholder.com/150);
transform: skewX(-20deg)
}
.one {
}
.two {
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex spotlight">
<div class="one">a</div>
<div class="two">a</div>
</div>
codepen
Are there any other alternative ways of going about this?
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-ms-transform:skew(-5deg);
-o-transform:skew(-5deg);
-moz-transform:skew(-5deg);
-webkit-transform:skew(-5deg);
transform:skew(-5deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.right {
left:50%;
right:-5%;
}
.img {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
-ms-transform:skew(5deg);
-o-transform:skew(5deg);
-moz-transform:skew(5deg);
-webkit-transform:skew(5deg);
transform:skew(5deg);
}
.left-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.right-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="view">
<div class="left">
<div class="img left-img"></div>
</div>
<div class="right">
<div class="img right-img"></div>
</div>
</div>
</body>
</html>
Adjust position as you want on .right and .left class
I'm trying to have a responsive page here. Its working fine for the background image, but I have no idea how to do it for the other div elements. I'm actually a beginner at this. So please explain to me how i should structure my elements. Thank you so much.
here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>PAGE</title>
</head>
<div id="wrapper">
<div id="content">
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
</div>
<div id="push">
</div>
</div>
<div id="footer">
© Copyright 20XX
</div>
</body>
</html>
And my CSS:
html
{
background-image: url(wildbull-crop.jpg);
background-repeat:no-repeat;
background-position: center top;
background-color:rgb(194,190,189);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
body
{
height:100%;
overflow:hidden;
}
#content
{
width:33%;
border:solid thin black;
background-color:white;
opacity:0.7;
}
#footer
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:100px;
background-color:orange;
}
#wrapper
{
min-height:100%;
width:100%;
border:solid thin white;
height:100%;
margin-bottom:100px;
}
Research CSS3 media queries by screen size. Here is a good example to get you started:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
![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>
Sorry if this was asked before but I read and did not see my mistake.I try to center the #wrapper with margin:0 auto; but nothing happens...the width is set also.
This is the CSS:
I want the hole page to be centerd
#charset "utf-8";
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0;
background-color:#000000;
text-align:center
}
#wrapper {
width: 901px;
***margin: 0 auto;***
}
#header {
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
float: left;
height: 233px;
width: 901px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/menu.gif);
background-repeat: no-repeat;
text-align: center;
word-spacing: 70px;
padding-top: 17px;
float: left;
height: 33px;
width: 901px;
}
#main {
float:left;
height:auto;
width:901px;
}
#leftcol {
float:left;
height:auto;
width:300px;
padding-top:5px;
padding-right:0px;
padding-bottom:0px;
padding-left:30px;
}
#rightcol {
float:right;
height:auto;
width:500px;
padding-right:35px;
margin-right:0px;
}
#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:x-small;
float:left;
height:250px;
width:900px;
color:#666666;
clear:both
}
Also the html:
this is the basic html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">Content for id "wrapper" Goes Here</div>
<div id="header">Content for id "header" Goes Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="main">
<div id="leftcol">Content for id "main" Goes Here</div>
<div id="rightcol">Content for id "rightcol" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
You need to give body (your element's parent) a width :
html, body{
width:100%;
}
Besides, considering your markup, if you want the whole site to be centered, you should use your #wrapper as an actual wrapper, meaning it should include the other content nodes :
<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="main">
<div id="leftcol">Content for id "leftcol" Goes Here</div>
<div id="rightcol">Content for id "rightcol" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</div>
</body>