I have a background with two urls, one showing the regular state and the hover state. The div is empty and the width and height are set to 50px. I added padding to see if that would help, it did not.
<div class="container_12 clearfix">
<div class="grid_12">
<p id="footer-center">
<div class="hover-btn"></div><!--<img src="images/back-to-top-a.png" class="a">-->
</p>
</div> <!-- end grid_4-->
</div> <!-- end container_12 -->
.hover-btn{
display:block;
width:50px;
height:50px;
margin-left:50%;
}
.hover-btn{
background:url(../images/back-to-top-a.png) no-repeat center
center;
}
.hover-btn:hover{
background:url(../images/back-to-top-b.png) no-repeat center center, url(../images/back-to-top-a.png) no-repeat center center;
Simply replacing the hover-btn div with an img tag will show your first image and then the second on hover.
<img src="" class="hover-btn">
Related
I'm building a random quote generator: http://codepen.io/Kestvir/pen/peqjZZ ,
and while doing the html/css part of things, I've encountered a problem with the content, that is inside the transparent background. When resizing the window, the content is going off to right side, and it no longer looks like it is centered, when it actually is. If I remove the margins of the background (margin: 0 150px;) then this problem no longer exists, but then the transparent background becomes as wide as the entire window. I suspect that this is because my <div class="quote-bckgr"> is outside of the container, but I did so, because I had no idea, how to center my contents with the mentioned div class being inside the container, as opposed, of how it is now, because it was stuck to the very top of the page. How should I fix the text and buttons going off to the right, and not looking centered ?
I think this is what you wanted. I added the margin inside container and row divs, added the background color and border radius and removed it from your other class.
codepen
<body>
<div class="quote-bckgr">
<div class="container">
<div class="row">
<div class="new-margin">
<div class="col-sm-12">
<h1> Welcome to CIV5 random quote generator!</h1>
<div id="quotation"></div>
<div id="author"></div>
</div>
<div class="row">
<div class= "col-md-3 col-md-offset-3">
<i class="fa fa-twitter" aria-hidden="true"></i>Tweet This Quote
</div>
<div class="col-md-3">
New Quote
</div>
</div>
</div>
</div>
</div>
</div>
</body>
and css
.quote-bckgr {
color: #fff;
text-align: center;
position: relative;
top: 50%;
margin: 0 auto;
transform: translatey(-50%);
overflow: hidden;
}
.new-margin{
margin:0 155px;
background-color: rgba(25, 0, 0, .45);
border-radius:5px;
}
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I am using the bombax wordpress theme. As the description isn't showing up when I use an image for header, I decided to tweak the html/css to show the site slogan on the middle of the header.
This is the site:
http://www.noticiasnaturais.com/
This is the image I want to center (without overlapping the logo at left, the leaves with site name):
http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png
This is the original theme html:
<div id="headerwrap">
<div class="clear"></div>
<a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais">
</a>
</div>
I then tried to change as follows, adding adiv around the href to float it to the left, add an outer div to float to the right (filling the rightmost space), and a third div to be aligned at the middle.
<div id="headerwrap">
<div class="clear"></div>
<div style="float:left"><a href="https://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais">
</a></div>
<div style="float:left;height: 100%";align=center><img src="https://i.stack.imgur.com/JzdyG.png">
</div>
</div>
Edit: Just clarifying the question, I need the image with the text to be on the right side of the logo. At this moment I have it directly on the background image, but that doesn't work for all screen resolutions. None of the suggestions (so far) could get it right.
I'm not 100% sure of what you are asking, but I think what you need to do is this:
<div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">
That should center the image.
When you remove float: left from the div and add clear: both; text-align: center, it stretches over the whole width and stays below the leaves image. Then you have the centered image
<div style="clear: both; height: 100%; text-align: center">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
JSFiddle
Note, that the align attribute is deprecated.
Update:
When you want the text image stay on the same line, you must give a minimum width to the div and center as before with text-align: center
HTML
<div id="middle">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
CSS
#middle {
min-width: 800px;
text-align: center;
}
JSFiddle
I'd like the text under this image to be left justified under the image ('my title' to be aligned with the left side of the image), no matter what it's height, without Javascript.
HTML
<div class="container">
<div class="img-container">
<img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/>
<div class="info">
<h1>my title</h1>
<p> my description</p>
</div>
</div>
</div>
CSS
.container{
width:900px;
position:relative;
}
.img-container{
text-align:center;
}
img{
max-width:100%;
}
.info{
text-align:left;
}
http://jsfiddle.net/NGwdc/
If you adjust .container width, it should always be aligned to the left side of that image.
Is this possible with only CSS?
The answer is to make the image container display:inline-block, and the outer-most container text-align:center
http://jsfiddle.net/NGwdc/1/
I just wanna know if background is in color and content div is in image is possible?
<body style="background-color: black; ">
<div id="header" style="background: url('xxx11.png') repeat left top;">
</div>
<div id="#container" style="background-image: url(xxx.png)">
</div>
</body>
When I run, I can just see black color but cannot see the background image..
Thanks in advance
<div id="#container" style="background-url: url(xxx.png)">
should be
<div id="#container" style="background-image: url(xxx.png); width=500px; height=500px;">
Set the width and height to whatever you need.
You will see black color until you do not set width and height of the divs. You do not have set width or height of div or do not have content in it.That is why it is showing body's black color. As you are using inline style so, you can use this:
<div id="header" style="background: url('xxx11.png') repeat left top; width:*px; height:*px;">
</div>
<div id="container" style="background-image: url(xxx.png); width:*px; height:*px;">
</div>
If your <div> is empty, it will be very small (1x1 pixel?), so you won't see your background.
So you can use CSS to set the size of your idv, so the background is shown. For example your could use:
#header {
position:absolute;
height:200px;
width: 400px;
}
Note: the id of your container div is #container, I do not think that a # is allowed in a tag id...
Try below code.
background: url(../img/pattern/59.png) 0 0 scroll #ccc;
<body style="background-color: black; ">
<div id="header" style="background: url('img/4.png') repeat left top #CCC;height:200px;">
</div>
<div id="container" style="background-image: url(img/5.png);height:200px;"></div>
</body>
Above code is tested, body was all black screened because you did not defined height property for divs.