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.
Related
Problem
I am trying to set the background image of a div in CSS, but it does not work.
Code
.img-background {
background-image: url('Portfolio5.jpg');
height:100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="img-background"></div>
</body>
</html>
jsfiddle
In your .image-background class, you are setting the height as 100%; this will cause it to become 100% the height of the parent element, which is the body. However, the body doesn't have a height specified, so it defaults to 0 and as a result, your image is not visible. To solve this, you need to set the height of html and the body to 100% as well.
html, body {
height: 100%;
margin: 0;
}
The margin has been set to 0 to avoid the body overflowing.
It's not working because you use height:100%
for example :
.bg-img {
width: 100%;
height: 100vh;
background: url('./img.png') no-repeat center;
background-size: cover;
}
Edit:
vh stands for Viewport Height (vh) and it means 100% of parent's height.background-image needs certain height and width to show content, so a tag without inner html does't show its content.
I am trying to put a background picture with medium opacity but unable to do so, here's my html:-
<body style="margin:auto;width:100%;height:100%;opacity:0.1;background-image:url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg')">
</body>
Use div instead of body tag. And give a particular height to that div.
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div style="margin:auto;width:100%;height:400px;opacity:0.1;background-image:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg')">
</div>
</body>
</html>`
Instead of adjusting the body elemet, add an extra div to hold the background, better to separate the style into a css file.
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
<title>Your favourite travle partner</title>
</head>
<body>
<div id="background"></div>
</body>
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 am trying to set a large logo image as a background image. I want to place it in the bottom right corner and remain there regardless of window size. I am using this code:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p class="centeredImage"><img src="image1.png"></p>
</body>
</html>
css:
body {
background-image: url("logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
.centeredImage
{
text-align:center;
display:block;
}
This is placing the logo in the correct place however it is cut off slightly at the bottom of the window (red is the actual logo size):
Not sure what I am doing wrong here, I tried adding bottom padding to the body and it was no use. Could someone give me some pointers on what I might be doing wrong please?
Edit:
So I moved the logo into a div like so:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="innerdiv"><img src="logo.png"></div>
<p class="centeredImage"><img src="image1.png" width="375px" height="667px"></p>
</body>
</html>
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
}
.centeredImage
{
text-align:center;
display:block;
}
This is working correctly now and the logo isn't cut off however it is overlapping the image of the phone slightly, is there a way to force an image in the div to be displayed in the back?
Adding this CSS should work:
.innerdiv img {
z-index: 0;
}
.centeredImg {
z-index: 1;
}
Adding those codes should fix your issue.
<p class="centeredImage"><img src="image1.png"></p>
First of all you have to mention the size of the image like try this one
<img src="image1.png" width="500px" height="100px">
Adjust the width and height of your choice.
Coming to logo.png try this one in CSS
background: url(logo.png);
background-size: 80px 60px;
background-repeat: no-repeat;
Unsure how to explain this properly.
I have two elements on my web page that I need to properly align and resize together to match the browser.
The image isn't the current problem, but I have a second element that I cannot get to properly match and resize.
So, the top of my website will have an image that automatically sizes using this CSS code:
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;}
I need another element placed over top of that, covering part of the first image.
Since it will not let me post an image here, which would explain much better than just trying to describe by words, I have posted in here:
As you can see, I want to put the time box I have generated through javascript over the time from the top bar. When the browser resizes, I need it to maintain the position and size with the top image.
I have tried nesting it inside a div, but it seems it will not resize properly.
As per request, here is the code I currently am using:
HTML:
<!DOCTYPE html>
<html id="UbuntuDesktop">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script language="javascript" type="text/javascript" src="https://raw.githubusercontent.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<script language="javascript" type="text/javascript" src="js/time.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
</head>
<body>
<div><img class="top" src="Graphics\Ubuntu_Desktop_top_bar.png" />
<div id="udclock"><span id=curTime></span></div>
</div>
</body>
</html>
css:
#UbuntuDesktop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("Ubuntu_Desktop_12_04.png");
background-position: center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;
}
#udtopwrapper {
}
#udclock {
background-color: #4c4b47;
position:relative;
top:0;
right-margin:20px;
float: right;
text-align: center;
z-index: 1;
}
I don't think the js code will help. It is one that I found that will show the current time, and I am creating a dynamically changing time.
You can do something like this-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cssQ1.css">
<title>Document</title>
</head>
<body>
<header>
<p>Text here</p>
</header>
</body>
</html>
CSS
*{margin: 0;
padding: 0;}
header{background-image:url('download\ \(1\).jpeg');
height:100vh;
background-position:center;
background-size:cover;
background-attachment:fixed;}
p{color:white;
font-size: 200%;}