I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
Related
I'm trying to display html elements (forms, text, etc) on an image, which has been made transparent with gimp. But whatever I tried, the content is hidden by the image.
I've changed the page's background color just to be sure the browser wasn't changing the transparent part to white for some reason, and it does not.
I also have tried to play with the z-index property but this didn't work.
On reloading the page, I can see the text displaying correctly, but then the image displays and overlays it.
#foo{
position: relative;
}
#foo img{
width: 20%;
height: 20%;
}
#bar{
position: absolute;
}
<!DOCTYPE html>
<body>
<div id='foo'>
<img src='my_img' />
<div id='bar'>
<!--This is where I want to write what will be displayed on the transparent image.-->
</div>
</div>
</body>
I didnt find any similar situations, neither here neither on other websites so any suggestion is welcomed.
Edit: Actually I set the top and left CSS properties and it's now working fine.
Have you considered background-image?
#bar {
background-image: url('/path/to/myimg.jpg');
background-size: contain;
background-position: center center;
}
I have code something like this:
<div class='image-holder' style='width:128px; height:128px'>
<img class='thumbnail' src='image1.png'>
</div>
The actual size of .thumbnail is unknown, and can potentially be not an exact square.
So what I am trying to do is not change the dimensions of the image (.thumbnail) at all, but instead show just the center (both horizontally and vertically) of the image inside the .image-holder element.
For example, if the image (.thumbnail) was 256x256, the inner 128x128 section of the image should appear inside .image-holder.
I am open to using an actual img element, or, using background-image for the div. I have experimented with both with no success.
I am fairly certain I can write some javascript to do the work if necessary, but I was looking to see if there is a pure CSS solution before I go down that road.
You should use background-image for this. Just remove the default repeating from it, and set the background-position: center;
See it here:
.image-holder {
width:128px;
height:128px;
border: 1px solid red;
margin: 10px;
background-repeat: no-repeat;
background-position: center;
}
#holder-1 {
background-image: url('http://via.placeholder.com/350x150');
}
#holder-2 {
background-image: url('http://via.placeholder.com/100x100');
}
<div id="holder-1" class='image-holder'></div>
<div id="holder-2" class='image-holder'></div>
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
So I want to decrease the size of the img on the header so it looks cleaner and a more sharp img , however i am unsure how to do it?
Here is the code
CSS:
.header {
background: #000000 url (C:/website/logo final.svg) no-repeat;
background-size: 80px 60px;
}
HTML:
<header>
<div id="header" align="center">
<img name="Antique Picture" src="C:\website\logo.jpg
" alt="logo" width="100%" height="100%">
</header>
all help would be rly appreciated thankyou
I'm going to tackle this one. As Michael Coker said, there are a number of flaws that need fixing in your HTML structure:
1) The align attribute is deprecated. We'll cover that with CSS.
2) Image widths must either be pixel-based, or covered in CSS.
3) The header div isn't closed.
4) You provided local images, so we can't access them, meaning we can't check if they're blurry.
Additionally, the img tag has no attribute name, and the background-image URL must have no space and quotes around the file path. I'll ignore the fact that it's bad practise to have a space in the filename, as it will work with the space.
Fixing up those problems, your new structure looks like this:
HTML
<header>
<div id="header">
<img src="C:\website\logo.jpg" alt="logo">
</div>
</header>
CSS
.header {
background: #000000 url('C:/website/logo final.svg') no-repeat;
background-size: 80px 60px;
}
To centralise the header, you need to add text-align: center to it in the CSS:
.header {
background: #000000 url('C:/website/logo final.svg') no-repeat;
background-size: 80px 60px;
text-align: center;
}
To adjust the image widths properly, you should use CSS for this as well:
.header img {
width: 100%;
height: 100%;
}
Keep in mind that percentage-based widths are relative to the parent element. The header parent element will need a height and width in order for the image child to adapt. If you'd prefer a fixed image width, these values should be specified in pixels:
.header img {
width: 100px;
height: 100px;
}
Then if you find it is stretched, you can adjust the pixel values above (or the image itself, if that is easier).
Hope this helps!
On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...
<!DOCTYPE html>
<html>
<head>
<style>
.div{
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.img{
/*What shall I put here?*/
min-width:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="div">
<img class="img" src="img.jpg">
</div>
</body>
</html>
You would be best setting the image as a background of the div and using setting the background position.
This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
}
To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
background-size: cover;
}