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
Related
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%;}
How would one ensure that certain content is always fitted inside a particular area of a web page?
As an example, I would like the sentence "Fit this inside" to appear inside of the background image. Here is my test.html file:
<!DOCTYPE html>
<html lang="en">
<link href="test.css" rel="stylesheet" type="text/css">
<body>Fit this inside</body>
</html>
Here is my test.css file:
body
{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
This results in the text "Fit this inside" appearing at the very top of the page, and not inside the background image area.
What is the correct method to do this?
JSFiddle: http://jsfiddle.net/u3TAF/
Look at my comment higher.
You've set the background image to be 68% height. set the text into container with same properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
body
{
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
}
div.container {
position:absolute;
top:16%;
height: 68%;
left: 0%;
overflow:auto;
}
</style>
</head>
<body>
<div class='container'>
Now it's fit!
</div>
</body>
</html>
I think the best option would be to put the text within a DIV and then apply the styles to that element. Somewhere along the lines of:
<html>
<head>
<style type="text/css">
#test{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>
The background image should be given to the parent element. In your case, in the CSS, attach the background image property to the <html> element. So this image would act as a background to all the content of this page.
If that is what your aim is, then:
html{
background: url('bg_img.png') no-repeat center center fixed;
}
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 need to print background image on every page once when I print big html file. Now it prints only on the first page.
So the part of css for that is:
#media all {
body
{
text-align:left;
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position:right top;
}
}
If you specify the background-attachment property as fixed, it renders on every page. The only trouble with this method is that content can clip over top of it (and it only appears to work in FireFox).
<style type="text/css" media="print">
body
{
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position: right top;
background-attachment:fixed;
}
</style>
Another option is for your background image to share the ratio of your printable area (i.e. Letter size 8.5x11 paper with .5 inch margins on all sides is 7.5:10) and to have the logo in a field of whitespace (e.g. http://i.imgur.com/yvVW2mk.png). Then you set the image to repeat vertically and be 100% sized.
<style type="text/css" media="print">
body
{
background-image:url('/C:/whitespace-logo.png');
background-repeat:repeat-y;
background-position: right top;
background-attachment:fixed;
background-size:100%;
}
</style>
I found a way to print a background even on chrome by creating a div with position: fixed that acts as background. I had the idea when background-attachment: fixed didn't work, but it made me think about position: fixed on a div
This way the background is printed fully on every page even on chrome.
https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
HTML:
<body id="print-layout">
<div class="bg-container"></div>
<div class="content">
<h1>Hello there!</h1>
Long content...
</div>
</body>
CSS
body {
width: 100%;
height: 100%;
margin: 0;
}
.bg-container {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
background-image: url(https://imgur.com/cjmB60j.jpg);
background-size: 100% 100%;
}
.content {
position: relative;
z-index: 1;
padding: 140px 55px;
}
Be sure to include the CSS file on all pages.
<link type="text/css" rel="stylesheet" href="style.css">