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%;}
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.
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;
I am trying to get this div to be all the way to the right side of the screen. here is the html:
<html>
<head>
title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<h1> </h1>
<body>
<div id="bannerR">
<a href="yahoo.com" target=_blank>
<img src="yahoo.com" border=0></a>
</div>
and here is the style.css
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL{ position: relative; top: 500px; left: 500px; }
#bannerR{ position: relative; float: right; }
body {
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin-top:100px;
margin-right:180px;
margin-bottom:10px;
margin-left:200px;
}
please help, Im very new at code and bought a book but that hasnt helped. I have spent few hours trying to get this and to no avail.
Your body styles contain margin-right:180px. Because of that the #bannerR will never float all the way to the right. Remove that style and it'll work. Here is some code:
body
{
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Here's a fiddle to show it in proof: http://jsfiddle.net/rzKaz/1/
Make sure your DIV isn't contained within an element with restricted space (doesn't span the entire width of the page)
Make sure you link the css file to the HTML so the browser knows what css files you are using.
<html>
<head>
<link rel="stylesheet" type="text/css" href="your_style.css">
</head>
<body>
<!-- YOUR HTML -->
</body>
</html>
I want to reduce the size of the image as well place the image background-position:center 10px;
<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
<head><title>TFZIM3 RDA</title></head>
<link rel="icon" type="image/png" href="logo.png" />
<link rel="stylesheet" type="text/css" href="test.css" />
<body style="background-color:d8d8d8;" >
<img class="normal" src="main.png" width="700" height="80" />
</body>
css
img.normal
{
background-position:center 10px;
}
but this is not working.
Please guide
Thanks in advance
To resize an image you'll have to use a server-side language such as php. You cannot do it with a markup language.
As for centering an image, the background-image property is used for backgrounds, not for images. Images are inline elements. Therefore a text-align: center; to parent block element should work. However, If you want to place an image and make it fullscreen I'd use this code:
<head>
<style>
body { position: relative; z-index: 0; }
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -100;
}
</style>
</head>
<body>
<img class="bg" src="path/to/your-image.jpg">
</body>
Check the fiddle.
Edit
To make a full-screen background image, I now use the CSS3 background-cover property. You may use it like below:
<html>
<head>
<!-- head code -->
<style>
body {
background: url('path/to/img') no-repeat center fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<!-- body code -->
</body>
</html>
According to this site, the compatibility is pretty much good.
You are styling the image, ie giving the image a background image. Try something like the following:
body {
background:url(main.png);
background-size:700px 80px;
background-repeat:no-repeat;
background-position:center 10px;
}
Then you can also lose the img tag.
See this demo (updated)
Image is resized using background-size: 100% 100% the values in % describe what percentage of the parent should image take.
+background-size +background-position