I am attempting to duplicate the following screenshot:
https://i.stack.imgur.com/HJwou.png
Where the background image sits between two separate colored divs. I have attempted to use absolute positioning, but the issue I run into is the image covers text and other divs, etc. Any and all guidance would help immensely on how to achieve this. A minimal example would be the following code:
<div style={{ positon: "relative", zIndex: 0 }}>
<div style={{ backgroundColor: "red", height: 500, width: "100%" }}></div>
<div
style={{ backgroundColor: "blue", height: 500, width: "100%" }}
></div>
<div
style={{
backgroundRepeat: "no-repeat",
backgroundPosition: "cover",
backgroundImage: `url(${Squiggle1})`,
height: 600,
width: 451,
position: "absolute",
top: 250,
bottom: 0,
right: 0,
zIndex: -1
}}
/>
</div>
attached is a code sandbox for debugging: https://codesandbox.io/s/empty-sunset-tchcup?file=/index.css
To get the three backgrounds (red, blue, squiggle) beneath the two divs we can put them as background to the container div.
This snippet also makes things a bit more responsive by not building in the heights of the two inner divs, just giving them each 50% of the height of their parent.
You can of course put back the fixed width of the container if that is required. This snippet just uses a width of helf the viewport and height of the whole viewport as a demo.
Note that in order to get the look that was shown in the original snapshot in the question the squiggle image had to have some of its top part, which was just blank, cut off so it could be seen going up the right hand side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Squig</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style>
* {
margin: 0;
}
.container {
background-repeat: no-repeat;
background-position: right top, left top, left bottom;
background-size: 50% 100%, 100% 50%, 100% 50%;
background-image: url(https://i.stack.imgur.com/qtQZn.png), linear-gradient(red, red), linear-gradient(blue, blue);
width: 50vw;
height: 100vh;
}
.container>* {
width: 100%;
height: 50%;
}
</style>
</head>
<body>
<div class="container">
<div>
TEXT ABOUT PRODUCTS
</div>
<div>
TEXT ABOUT HOW IT WORKS
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
.first {
background-color: red;
height: 100px;
width: 200px;
position: absolute;
top: 0;
left: 0;
}
.second {
background-color: blue;
height: 100px;
width: 200px;
position: absolute;
bottom: 0;
left: 0;
}
.main {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-position: right;
background-image: url(squiggle.png);
}
</style>
</head>
<body>
<div class="container">
<div class="first">
TEXT ABOUT PRODUCTS
</div>
<div class="main"></div>
<div class="second">
TEXT ABOUT HOW IT WORKS
</div>
</div>
</body>
</html>
Is this the code you are looking for!
Related
I have a background image for a webpage that is too big, and in general, I want to prevent scrolling on the webpage. The HTML looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
and the CSS looks like
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body {
background-image: url("bg.jpeg");
background-size: cover;
background-clip: padding-box;
display: table;
}
This code mostly achieves the desired effect (background image looks good and scrolling is prevented); however, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) seems to introduce ~1px of white space around the right and bottom of the display area. I can get rid of the margin by doing something like padding: 1px instead of padding: 0, but then the scrollbars come back. Any ideas on how to get rid of this small whitespace while still preventing scrolling?
I tried adding a wrapper <div> for all the <body> content and setting the background and overflow properties on the <div>, but still didn't have luck (either got scrollbars or the odd small margins on bottom and right).
While I am not entirely clear why you get that white band(s) a slightly hacky workaround would be to put the background onto a before pseudo element which you make just slightly larger than the body.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100% + 1px);
height: calc(100% + 1px);
background-image: url(https://picsum.photos/id/1015/1024/1024);
background-size: cover;
background-position: center center;
background-clip: padding-box;
}
body {
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
This question already has answers here:
Is there an equivalent to background-size: cover and contain for image elements?
(14 answers)
Closed last year.
How to make a normal image (be it 'img' or 'svg') behave exactly like a 'background-image' ? I mean, covering the whole screen and getting cropped to never display borders ?
Only 'css', no 'js'.
I tried this, mostly from img behaving like a background img?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg" style="position:fixed; z-index:-5000; top: 50%; left: 50%; margin-left: -960px; margin-top: -540px" >
</div>
</body>
</html>
The "demo.jpg" image is 1920x1080.
It works somewhat, but the top picture doesn't get "squeezed" if the window gets too narrow.
So I tried the proposed approach below :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg">
</div>
</body>
</html>
Which looks like it is working.
The main purpose is to add a clickable map area to the background image. But since it is a "background image", nothing can be clicked.
The map works at that point, goal reached.
Yet I tried the 'img' approach with a 'svg' instead, but the 'a href' just doesn't work like expected :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.svg">
</div>
</body>
</html>
If I copy the 'svg' directly, it then refuses to get "cropped", it is always "contain" :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
svg {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<svg viewBox="0 0 1920 1080" >
<a href="https://www.google.fr/">
<rect x="351" y="797" fill="#777" opacity="100%" width="92" height="42">
</rect>
</a>
</svg>
</div>
</body>
</html>
Any idea ?
use object-fit:cover
img {
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
<img src="https://picsum.photos/id/1069/1000/1000">
This question already has an answer here:
Why does the linear-gradient disappear when I make an element position:absolute?
(1 answer)
Closed 1 year ago.
It's my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Problem 01</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<img id="logo" src="./images/logo.png" alt="Code-Star logo"/>
</body>
</html>
and the styles:
body {
position: relative;
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
}
#logo {
position: absolute;
display: block;
background-color: green;
left: 50%;
bottom: 50%;
width: 100px;
}
I want to center the #logo element and create a gradient for body.
the first problem is that when I set position: absolute; for #logo element, the gradient doesn't apply to the body.
the second is that when I set position: relative; to the body, the #logo element doesn't align properly to the screen!
use flex style and also give a height to body
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#logo {
background-color: green;
width: 100px;
}
<img id="logo" src="./images/logo.png" alt="Code-Star logo" />
When I place a div with a background-image property and use position: relative I end up with a white frame around the edge of the image which I do not want.
I cannot use absolute as I need an element to follow directly below the background image and scale on different resolutions (so no setting height/width in px).
Here's the CSS:
#pagehead{
position: relative;
background-position: center, center;
background-image: url("Header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
top: 0;
bottom: 0px;
left: 0;
right: 0;
}
section{
position: relative;
}
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="pagehead"></div>
<section>
<div id="content">
blahblahblah
</div>
</section>
</body>
</html>
Setting the body's margin to 0 might fix the problem:
body { margin: 0px; }
I've checked everywhere that I can think of, no luck. I have a page I'm trying to make responsive. Pretty much one div on top of the other with a css background image inside. When I change the browser window size the image seems to scale pretty well but the div height doesn't so you can see the background of the div. I need the div height to change in proportion to the image size. I'm trying to use CSS only without javascript since I'm brand new to web design. Any help would be great.
Here is the code I've got.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Home Page</title>
<meta name="description" content="The best toy out there">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--<h1> Body Text</h1>-->
<div id ="top_pic">
<hgroup> </hgroup>
<h1> top_pic; SOME TEXT WILL GO HERE</h1>
<!-- A logo image will also be placed on top of background image in this div probably in the hgroup -->
</div>
<div id = "middle_pose">
<h1 class = "midposetext"> MIDDLE pose div, some text goes hereAAA</h1>
</div>
<div id = "content">
<h1> Content div...some text goes here</h1>
</div>
<div class = "footer">
<h1> Footer div</h1>
</div>
</body>
</html>
The CSS:
body {
background-color : #e8e821;
width: 85%;
height: 100%;
margin: 0 auto;
border: dotted black;
position: relative;
padding: 1%;
}
#top_pic {
background-image: url('images/eyeforheader1.jpg');
background-size: cover;
background-repeat: no-repeat;
border: solid #3fa85f;
margin: 0 0 20% 0;
width: 100%;
height: 100%;
display: block;
}
#middle_pose {
/*background-image: url('images/girl on back grasping sheets brunette.png');*/
background-image: url('images/Screen Shot 2014-02-10 at 11.47.48 PM.png');
background-size: 100%;
background-repeat: no-repeat;
background-color: #7547dd;
width: 100%;
height: 450px;
border: solid #f05858;
margin: auto;
}
#content {
background-image: url('images/Screen Shot 2014-05-28 at 5.52.03 PM.png');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 500px;
border: solid orange;
}
.midposetext { color: #de4b8f;
}
#middle_pose h1{
color: yellow;
z-index: 10;
font-size; 1.4em;
}
In your CSS file, you can change the #middle_pose background-size property:
from:
background-size:100%;
to:
background-size:cover;
This will scale the background image to be as large as possible so that the container's background is covered. However, this may force portions of the image to be out of the viewable area (at certain dimensions). In this case, you may find that you want to use media-queries to adjust the container's dimensions and/or swap the image for one with more appropriate dimensions/aspect-ratio.
Hope this helps :)