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" />
Related
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!
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 answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I want to set a full size div in css but it keeps set margin.
As you can see, the background color i set on html is still visible.. how can you avoid this and make my div full size?
body,
html {
height: 100%;
background-color : red;
}
#front-bg {
background-image: url('https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front-bg h1 {
color: white;
font-size: 5em;
width: 100%;
position: absolute;
bottom: 15%;
text-align: center;
}
<!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>My site</title>
</head>
<body>
<div id="front-bg">
<h1>Stack Overflow</h1>
</div>
</body>
</html>
try
body,
html {
height: 100%;
background-color : red;
margin: 0;
}
im making a website, but the responsive image for safari mac/iphone is not working
here is my code
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:locale" content="es">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Reparación iPhone – iPad, iPod | iFixed</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<nav><img src="LayerMain.png" style="max-width: 100% height: auto" /></nav>
and this is the css
img {
max-width: 100% !important;
height: auto !important;
}
For most 'resposive' images in layout, here's how I'd recomend setting that up. The parent should define the constraints.
https://jsfiddle.net/sheriffderek/9dnjvnc4/
<figure class='logo'>
<img src='http://placehold.it/800x700' alt='example image'>
</figure>
...
figure {
margin: 0;
padding: 0; /* reset */
border: 1px solid blue;
}
figure img {
display: block;
width: 100%;
height: auto;
max-width: 100%; /* just in case? not nessesary */
}
.logo { /* specific figure size */
max-width: 400px;
}
It sounds like you are trying to get a full-screen image - in which case you should use background-image on a div setup to be full-screen or the body etc. https://jsfiddle.net/sheriffderek/v65saLmd/
body {
background-color: black;
background-image: url('http://placehold.it/2400x4000');
background-size: cover;
background-position: center center;
border: 2px solid blue;
}
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; }