In Html I've this code
<div class="page">
<div id="header">
...
</div>
</div>
And here is my css
.page {
width: 1028px;
background-color:#103250;
margin-left: auto;
margin-right: auto;
}
#header
{
background:url('/Img/SubpageBox1.png') no-repeat top;
height:150px;
padding-top:50px;
}
But now my background-image is placed out of div... On the top of the page... How can I place it on the top of the header?
You can specify the position of the background image:
background:url('/Img/SubpageBox1.png') no-repeat center 50px;
or using background-position css property.
Related
I'm trying to add a banner image and adjust its size from the CSS. The IMAGE and the CSS are in the same folder, next to each another.
HTML
<body>
<header>
<div class="banner"></div>
CSS
div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;
}
You have no content in that element, therefore its height is 0 => no visible background. Just add some content and the background will appear.
The height setting has no effect if the parent element doesn't have a set height. If you want the banner to be 25% of the window height, add this rule:
html, body {
height: 100%;
}
I put it all in the html file I created and this works for my image that's in the same directory. You don't need to call it as div.banner, adding the class to the div is enough to just call it by what you name it.
<head>
<style>
.banner{
height: 100%;
background-image: url('./butterbot.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<div class="banner"></div>
</header>
</body>
background is an inline attribute and would work with root elements such as html or body attributes if you set the background styling to <body>(just an example). Though it is not advised to use it on the html and body but a fixed position div with 100% width and height as shown below
.banner {
background: url("https://picsum.photos/200") no-repeat fixed center;
position: fixed;
height: 100%;
width: 100%;
}
<div class="banner"></div>
I'm building a simple website right now and faced a small issue. How do I align picture (iMessage text with blue bubble) in the center of the screen so and place a text in the bottom left corner of the image (text is Read + time)?
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<head>
<div>
<img src="myimage.jpg"></img>
</div>
</head>
But how do I add text in the bottom left corner right below the image?
Something like this might work for you...
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<div class="centered">
<img src="myimage.jpg"></img>
<p>tester</p>
</div>
</head>
Although I completely agree with Temani, there are lots of resources on centring such as the links below:
css3 pr align-self
how to css image center
css align
Do you want to set your image in the center of screen Or in the center of a div?
If you want to set it in the center of screen horizontally then you shoud set
margin-left:auto;
margin-right:auto;
And if you want add text on image, you shoud set that image in the background of a div and add text in that div wherever you want
.imgdiv{ background: url(your IMG url) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px; width: 300px;
}
.imgtxt{
left:0; bottom:0;
}
<div class="imgdiv" >
<span class="imgtxt">Your text</span>
</div>
I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle
I am having troubles with HTML/CSS when combining a div with a fixed-background image together with a scrolling png with a transparent background.
What happens is that the div with the png picks up the background color of the page when it scrolls over the div with the fixed-background image. Here's an example where the body is red so it is clear what's going on.
Here is my markup:
<body bgcolor="red">
<div id="bkg"></div>
<div><img src="hands2.png"></div>
<div id="bkg2"></div>
and here is the css:
*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{background:url(danicool.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
#bkg2{background:url(danifreak.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
I tried adding background: transparent to every div that might effect things with no results.
Is it not possible to scroll over a fixed-background image with a png that has a transparent background?
Your problem is that the hands div is in flow, and taking space.
You want it to be out of flow, and so the 2 images are adjacent one to the other.
the easiest way to acieve this is settin position absolute (and then adjusting the position;
*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
.hands {
position: absolute;
top: 400px;
width: 900px;
}
<div class="body" bgcolor="red">
<div id="bkg"></div>
<div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
<div id="bkg2"></div>
</body>
img{max-width: 100%;}
#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
.hands {
background-color:rgba(255,0,0,0.5);
position: absolute;
top: 400px;
width: 100%;
}
<div id="bkg"></div>
<div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
<div id="bkg2"></div>
Hi llyfre you can set like this
<div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>
CSS
*{margin:0;padding:0;}
body{
background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;
}
.bg-img{
background-color:rgba(255,0,0,0.5);
margin-top:100px;
}
img{max-width: 100%;}
#bkg{
background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(//www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
<div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>
I'm trying to place a clickable image in the center using padding.
The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.
If I remove padding it works but then the image isn't were I want.
Is there a way to fix this?
My HTML:
<body>
<div class="page">
<div class="body">
<div id="clicktoenter">
<h1></h1>
</div>
</div>
</div>
</body>
My CSS:
.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}
.home{
margin-bottom: 10px;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
padding:200px 200px;
}
.home:hover{
background:url(../images/imageclick.png) center center no-repeat;
padding:200px 200px;
}
Change your margin to this and it will center, not using padding.
.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
You have fixed width of block element, so you can to use auto left/right margins to center this block:
.home{
margin:200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
If you really want the clickable image to be in the middle of your screen, then forget the padding and just center the h1 the image is in.
#clicktoenter h1 {text-align:center}