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;
}
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)
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 .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.