I have a div with a class called "wrapper'. When i try to add a background image to it in css it does not show, but the image shows up when i add it to the body.
<!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>Login Page</title>
<link rel="stylesheet" href="Custom.css">
<style>
.wrapper{
width: 100%;
height: 100%;
background-image: url(login-register.jpg);
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
In given example .wrapper after rendering has 0px height so background image is just not visible.
Height in percentage is relative to its parent - so if parent has 0 height child will have 0 height too (as long as there are no elements with height inside child).
You can add min-height: 100vh or min-height: 300px to make it work.
This worked for me :)
.wrapper{
width: 100%;
height: 100vh;
background-image: url(login-register.jpg);
}
Related
I found a solution to my problem but, I can't wrap my head around why this works. Why would I need the class car-back when my id image has the same code? If I take out the class car-back it no longer stretches my image like I want it to. All I really need is an explanation why I need the class car-back.
Here is my html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initail-scale = "1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div id="image">
<img src="WP_20131026_007.jpg" alt="" class="car-back">
</div>
<p>This should be poppins</p>
</body>
</html>
my css
#import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
body{
font-family: 'Poppins';
font-weight: 200 !important;
/*max-width: 100%;
background-size: cover;
background-repeat: no-repeat;*/
}
#image{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
}
.car-back{
width:100%;
height:100%;
}
#image is the container of the .car-back image. The #image settings apply only to that container.
width and heigth of .car-back (both 100%) are relative to its container , i.e. to #image.
Without the .car-back class and its particular settings, the .car-back image would be displayed at its original size instead of being 100% width and heigth of its container.
I am facing problem in adding a background image using CSS. I am applying following codes for my web page design, but it's not adding image to the page and showing blank page. My html codes are running properly.
<link rel="stylesheet" href="css/style.css">
<style>
/* css reset */
body{
margin: 0px;
padding: 0px;
background: url('img\dark-1839088_1920.jpg');
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="css/style.css">
<style>
/* css reset */
body{
margin: 0px;
padding: 0px;
background: url('img\dark-1839088_1920.jpg');
}
</style>
<body>
<h1>This is heading</h1>
</body>
</html>
try like this:
body{
min-width: 100vw;
min-height: 100vh;
margin: 0px;
padding: 0px;
background-image: url('./img\dark-1839088_1920.jpg');
}
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; }
I'm trying to get a background on my website BJBGaming1.com, and i have this
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
</head>
<body>
and if you look i have the css/main.css part which has this for code
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png');
background-repeat:no-repeat;
background-size:cover;
}
and i have an image that matches the name background.png that is 1 folder back and into the img folder so i have the ../img/background.png but the background still wont show, somebody please help.
You can try to use !important to the background-image because foundation.css is already override your background image to #fefefe
html {
min-height:100%;
min-width:100%;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
body {
background-image:url('../img/background.png') !important;
background-repeat:no-repeat;
background-size:cover;
}
OR
You can also load your main.css file after foundation.css
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
Using Chrome developer tools, I can get your image to display using
body { background-image: url('../img/background.png') !important; }
and
body { background-size: 100% !important;} will work
or body { background-size: cover !important; } worked as well.