I have .jpg as footer that is 8x76 its just a simple line with height 76px and gradient blue color. I would like to put a logo on it. What's the best way to do that?
This is my CSS:
#light_footer_wrapper {
height: 110px;
background: url(../images/light_footer_repeat.jpg) repeat-x top left;
position: relative;
}
#light_footer_logo {
position: absolute;
top: 8px;
left: 600px;
height: 110px;
}
#light_footer {
width: 960px;
margin: 0 auto;
padding-top: 10px;
}
HTML:
<div id="light_footer_wrapper">
<div id="light_footer_logo"><img src="../a/images/logo.gif" /></div>
<div id="light_footer"></div>
I cant locate my logo now on my footer .jpg. but when I zoom in and out the logo moves around :S I want it locked
You could also set a background-image of the logo for #light_footer if you didn't want an extra div, but an extra div might give you more control.
#light_footer_wrapper is the full width of the browser, so when you resize, your logo will move with it.
You should put the image inside of #light_footer, make #light_footer position:relative, and then tweak your left and top values on #light_footer_logo.
Related
I am trying to have a simple profile page where I have a wide cover image and then I am trying to position the logo image on top of it. And then the rest of the information come.
I tried this one: stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div and I was able to put one image on top of another but the rest of the information was also placed on the images for some reason.
I tried things myself, here is my html:
<div id="container-biz-header">
<div id="feature-graphic-background" style="background-image: url('../Images/FG-10000001.jpg'); width: 700px; height 200px; background-repeat: no-repeat;">
</div>
<div id="logo-background" style="background-image: url('../Images/Logo-10000001.jpg'); width: 150px; height 150px; background-repeat: no-repeat;">
</div>
</div>
... here comes a lot of more information
My CSS is as follows:
#container-biz-header {
margin: auto;
}
#feature-graphic-background {
margin: auto;
}
#logo-background {
width: 160px;
height: 170px;
margin: auto;
z-index: 10;
position:relative;
top: -100px;
right: -300px;
}
At last I got what I wanted, to put a cover image and then a logo on top of it.
However, now there is a big gap between these images and the rest of the information, because #container-biz-header keeps its original height which is height('#feature-graphic-background')+height('#logo-background').
What can I do to avoid this gap? or otherwise, is there a better way to position the logo image on top of the cover image which avoids this gap?
add height:200px CSS to #container-biz-header to stop it from getting height('#feature-graphic-background')+height('#logo-background') height , here is a plunker .
and in your html, you have a typo too. "height 200px" and "height 150px" should have ":" .
#container-biz-header {
margin: auto;
height:200px;
}
Here is the fiddle http://jsfiddle.net/es_kaija/0jsqpq4L/3/
Watch your spelling :)
#container-biz-header {
margin: auto;
height: 200px;
}
I'm trying to center an element of a precise size on a background that is built specifically for it, in order to make it appear seamless.
In the following code, #window represents the browser's window size in pixels (change it to anything). #background obviously refers to the background image I'll be using, and #positionMe is the object I want to fit on the background. I want the background to always be centered in the browser even if the window is resized, and I want the kitten to always be centered in the black box on the background.
As you can see below, the problem is that the background isn't centered on the viewport to begin with; it's centered based on total width of the browser. And when you resize the screen, it doesn't adjust accordingly.
HTML:
<div id="window">
<div id="background">
<img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" />
</div>
</div>
CSS:
#window {
background-color: red;
width: 1280px;
height: 720px;
}
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
}
#positionMe {
position: relative;
top: 174px;
left: 154px;
}
This Fiddle demonstrates my issue.
Using a combination of display:table-cell and vertical-align:center will center your image vertically. In addition, you can simply use text-align:center to center your image horizontally.
http://jsfiddle.net/reinmcha/XtQ37/10/
Might need to do a little adjusting to keep the background div centered. So, we add another div and set to display:table. The "table cell" will fill the whole thing. Now we center the table with margin: 0 auto.
Final Product:
http://jsfiddle.net/reinmcha/XtQ37/20/
Might need to do some updating to get the image to center perfectly with the border (since it has width...)
Here's my go at it.
I hope you are aware there are tons of articles on this topic. Search around. You'll find your answer :)
You basically have two options, one would be using a div to display an image and making the image a centered background like so:
<div id="window">
<div id="background">
<div id="centerMe"></div>
</div>
</div>
with css:
#centerMe {
width: 100%;
height: 100%;
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center;
}
or for a pure css solution:
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#background:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#centerMe {
vertical-align: middle;
}
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}
I currently don't have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can't show the images because of an NDA. So will describe the best I can.
Basically:
I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.
I have a "Arrow" png image with transparent background that needs to be flushed against the right side of the browser.
The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.
The content of the page will be centered as well. Just in case this info was needed.
Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo.
All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.
I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn't something that is possible.
Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.
FINAL Update: Using the Advice from Max
Note: I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.
HTML
<div class="header-wrapper">
<div class="header">
<img src="images/logo.png" />
</div>
<div class="arrow-wrapper">
<div class="arrow-tail"></div>
</div>
</div>
CSS Code
.header-wrapper{
position:relative;
width:100%;
overflow:hidden;
}
.header {
position: relative;
z-index: 10;
height: 69px;
margin: 0 auto;
}
.arrow-wrapper {
z-index: 5;
background:url(../images/arrow_tip.png) no-repeat top left;
width: 50%;
position: absolute;
left: 50%;
top: 18px;
padding: 0 0 0 120px;
height:23px;
margin-left:140px;
}
.arrow-tail{
background:url(../images/arrow_tail.png) repeat-x top left;
height:23px;
width:100%;
}
If I got you right, this could a be a solution:
http://jsfiddle.net/WazcT/3/
HTML:
<div class="main">
<div class="header"></div>
<div class="arrow_container">
<div class="arrow">←‐‐</div>
</div>
</div>
CSS:
.main{
position: relative;
width: 100%;
overflow: hidden;
}
.header{
position: relative;
opacity: 0.5;
z-index: 10;
width : 400px;
height: 100px;
margin: 0 auto;
background: #ccc;
}
.arrow_container {
z-index: 5;
background: #88b7d5;
width: 50%;
position: absolute;
left: 50%;
top: 10px;
padding: 10px 0 10px 200px;
}
.arrow{
padding: 10px;
background: #eee;
font-size: 32px;
}
When I resize the browser (window) it shrinks the top background images (yellow squares) and causes a 1px break in the layout (the red squares show the area with the problem). I tried to force the size to always be the same for the top background images by setting width to 50px. The rest of the background is the repeated-x content_bg_sliver.gif image that I show by using a purple square. Any suggestions?
Thanks,
partizan
P.S: Please see attached images that shows the problem within the red squares.
<!-- HTML CODE Starts -->
<div id="top-navigation-container-inner">
<div id="top-nav-left-background"><!-- The left background appended to the top main navigation --></div>
<div id="top-nav-right-background"><!-- The right background appended to the top main navigation --></div>
</div>
<div id="main-body-container">
<div id="main-body-container-inner">
main content goes here....
</div>
</div>
<!-- HTML CODE Ends -->
/* CSS Code Starts */
#top-navigation-container-inner {
background: #FFF;
height: 160px;
float: none;
font: 14px Arial;
position: relative;
}
#top-nav-left-background, #top-nav-right-background {
height: 370px;
position: relative;
top: 0;
width: 50px;
}
#top-nav-left-background {
background: url('../images/top_nav_left_background.gif') left bottom no-repeat;
float: left;
margin-left: -50px;
}
#top-nav-right-background {
background: url('../images/top_nav_right_background.gif') right bottom no-repeat;
float: right;
margin-right: -50px;
}
#main-body-container{
background: aqua url('../images/content_bg_sliver.gif') center repeat-y;
float:none;
overflow:hidden;
width: 100%;
height: 400px;
}
/* End CSS Code */
try looking at this and see if this is what your after and if you think it's a better way to go about it!
http://drupalgeeks.co.uk/example/