I need to set the background image of my website to this picture.
However, when I look at the page, I see white space on that page as illustrated below:
I want the picture to cover the whole space, and when I open the site in any computer it must show the same. Finally I could not write text in the middle part of the center of the image. Not on top, but in the middle center of picture. Here is what I have so far
I need to have this text on the page in the middle part. Not in high part of page, but in the middle. Here is a short fragment of code that I have so far:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ka-ge" lang="ka-ge" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
postiton:absolute;
margin: 0 auto;
width: 4800px;
font-size:50px;
clear: both;
display: block;
z-index:-90;
}
#test a {
float: right;
}
a, a:active, a:visited {
color: light-blue;
a {text-decoration:none;}
}
</style>
<style>
a {text-decoration:none;}
</style>
<body >
<img src ='english.gif' style="float:right" width="90" height="90">
<img src ='russian.gif' alt="Russian flag" style="float:right" width="90" height="90"/>
<img src="georgian.jpg" style="float:right" width="90" height="90"/>
<img src="11.gif" width="100%" height="100%"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
კონტაქტი
</div>
</body>
</html>
I have done a little modification in your code as below:
</head>
< style>
#links {
position:absolute;
margin: 0 auto;
top: 50%; //centers vertically
left: 50%; //centers horizontally
width: 4800px;
font-size:50px;
clear: both;
display: block;
z-index:-90;
}
...
and in body tag as well:
<body background="11.gif">
above body tag sets your image in the background. You can resize your images i.e. either stretch or compress them using "height" and "width" attributes in the < img> tags to set their sizes.
Now you can place whatever text,link or other images over your background image.
Try it!
Related
I have an html image
<img src="abc.png">
and I want while the image is being loaded in the browser on a slower connection. The background / placeholder of image appear appear black. Is it possible by giving a class to the image and then setting the css property background-color: black;
<img class="black-back" src="abc.png">
<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>
I inserted the image in div and set the size of image to cover so div will occupy the space as size of image. However if your remove the background properties the div occupy the full line.I hope this is what you are looking for.
<img class="black-back" src="abc.png">
<style>
.black-back img{
background-repeat:no-repeat;
background-size:cover;
}
.black-back {
background-color: rgb(0,0,0);
}
</style>
the below code is without background styling properties
<div class="black-back">
<img src="abc.png">
</div>
<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>
You can do it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
.black-bg {
background: black;
}
</style>
</head>
<body>
<img class="black-bg" width="100" height="150" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Trifolium_hybridum_inflorescence_-_Keila.jpg" />
</body>
</html>
I'm trying to add a hover effect, so my logo changes with hover.
I have managed to do that, however, I'm trying to add it as an email signature on outlook but I have no idea how.
I tried copying it like I usually do with a non-interactive email signature but that didn't work.
Here's an example for you to grasp what I'm trying to do.
.photo {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
margin: 50px;
}
.photo .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.photo:hover .img-top {
display: inline;
}
.photo:hover img:first-child {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
</style>
</head>
<body>
<div class="photo">
<img src="pic1.jpg" width="100" height="100" alt="first">
<img src="pic2.jpg" class="img-top" width="100" height="100" alt="second">
</div>
</body>
</html>
It is possible that you have greatly overestimated the html and css that is supported in email bodies. To give you an idea, even your <!DOCTYPE html> tag isn't supported because it's too new; html 5.
Your code is "too new".
In a few words, you can't.
Take a look at email-campaign-html-and-css-support
Also, Hover over text in Outlook at Microsoft forums regarding your Outlook signature question under comments.
I have been created web page using html5, css3 and jQuery.
Now I just confused with creating human image with background-color.
May I know, is possible to create by using html5,css3?
<img src="Saina_hybd.png" style="background-color:red;" />
I need like this, http://s3.postimg.org/vol07gleb/Untitled_2.png
Can anyone help me to do this, thanks in advance.
You can not directly add background color property to image. You just create a div before the image and apply background color property to div and just reduce the opacity of the image.
.image_box {
width: auto;
height: auto;
float: left;
background-color: red;
}
.image_box img {
float: left;
opacity: 0.6;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="image_box">
<img src="http://www.paritybars.com/wp-content/uploads/2013/09/man-ok.png" alt="ok">
</div>
</body>
</html>
I like to put a line throughout HTML page. How to do this?
I tried:
hr {
width: 100%;
}
but it doesn't work
The <hr /> tag is always of 100% width of its parent tag.
<br /><hr /><br />
Check if the parent has some padding which you need to remove. Another option is to set the body tag's padding and margin to 0.
body {
padding: 0;
margin: 0;
}
Complete code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<br />
<hr />
<br />
</body>
</html>
Check these Demos...
http://jsfiddle.net/dqnKQ/1/ And http://jsfiddle.net/dqnKQ/2/
Just type <hr />, it works great
You can always style it inline if need be.
for example:
<hr style="width:100%; height:6px; background-color: #cce1ec; border:none;" />
As an HTML tag it can also be used as a selector in CSS,
for example:
hr{ width:100%; height:6px; background-color:#cce1ec; border:none;}
I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}
What is the most efficient way to do this?
Many thanks in adavnce
EDIT
On page load
On scroll
On 75% decrease window
How about something like these changes to your CSS for the "#images" and "img" sections...
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
border: 2px ridge gray;
width: 90%;
display: inline-block;
overflow: scroll;
white-space: nowrap;
}
img {
padding:10px;
width:50%;
height:95%;
}
You can play around with those values but you should get a horizontally scrolling image section that changes on resizing the window...
You can take the gray border off if you'd like - I was just using it for testing...
EDIT
Uploaded a code sample with absolute positioning instead of relative as that keeps the image section 30px off the bottom...
I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}
edit
Using part of Zack's answer, I would change your css img rule to:
img {
padding:10px;
width:3.799;
height:100%;
}
That will give you an image that adjusts with the browser window size.
However you will need to use percents (%) to adjust your positioning rules (i.e. left, top, padding, margin, etc.) to keep all proportions the same.
Note
At this point I am only adjusting the example, so for the record Zack's design is more efficient, and would be better if the look satisfies you.