I have banner that needs to have an image aligned to the left and full height from top to bottom. To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. The Image is set to the height and width I want through WordPress.
Here's an image of what i'm going for:
I can somewhat get what I want by floating left on the image to get the Div Text to go to the right.
But my biggest problem is that I can't get my image to align top left of the banner properly. I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. It doesn't stay left on bigger screen sizes.
Here's what it looks like:
Here's the code for the Image Div:
(image dimensions set on WordPress as 641 width x 716 height)
margin-left: -142px;
margin-top: -281px;
float:left;
max-width:103%;
left:0;
display:inline-block;
top:0;
position:relative;
The damn image just stays at the bottom. I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up.
There is a wrapper around the Div Image and Div Text that I used this code:
display: inline-block;
position:relative;
width: 100%;
When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. Is this wrapper just my problem? Or is it how I'm targeting the image?
Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make.
Thanks!! I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. Maybe my problem is too specific? I'd really appreciate the help. I'd also be happy to give more examples / post more code if it helps.
give css to <img>
img{
height:100%;
max-height:100%;
width:auto;
}
may be this should work or if not then just post your html css i can help more from that
Here is a short example of what I did that may help you out some. There's no need to use the float property for this. Just specify the width property to whatever size you want it to be based on screen size.
* {
margin: 0;
}
header {
background: url(https://placeimg.com/1000/500/any);
width: 100%;
height: 500px;
background-size: cover;
}
header .header_img_left {
background: url(https://placeimg.com/640/480/any);
width: 35%;
height: 100%;
background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<div class="header_img_left">
</div>
</header>
</body>
</html>
Related
When trying to resize my webpage horizontally everything works out fine. When I try to resize the page vertically the divs start overlapping and the whole webpage looks weird. What could I try to fix this?
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
}
.container-2-wrapper
{
width:100vw;
height:100vh;
background: #f9f9eb;
}
<div class="container-1-wrapper"></div>
<div class="container-2-wrapper"></div>
I would recommend adding this to your styling on that section:
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
position: relative;
display: block;
clear: both;
}
This will put your code in a block format that's relative to the content surrounding it as well as clearing any text/elements on both sides of the page. I highly recommend this if you can (or are able to) float your elements to one side. If you code a float into your elements, this will keep your divs from running into each other. It should clear out both sides of the div element.
Also, if you're attempting to resize your page to format to another device, maybe this code snippet will help you out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Put this at the beginning of your CSS right under the declaration of font type and such (in the section for metadata). This should make your page so that it always scales up and down with the size of your window.
With the little information you can only guess:
Try to apply a position: relative and display: block to the wrapper
I'm trying to figure out how to make my homepage similar to my business card, seen here without the text: http://katiehambor.com/images/businesscardexample.png
I want the webpage to have this cropped circle to mimic my business card, and at almost any browser size the background image (diagonal stripes) will still be seen on the left and right.
Basically the top and bottom of the circle should be cropped and the left and right should be exposed so that the background image is shown (not shown on this codepen). I want it to be responsive so if someone makes their browser smaller, the circle will still be centered. I also do not want to be able to see the bottom of the circle, since right now if you scroll down you can see the bottom edge.
There will not be a lot of text in the circle, so there's no need to worry that all the text will fit inside.
I also want this site to be responsive so that for horizontal screens it will look like this, but on vertical screens the whole circle will probably be shown. I don't need to figure this out though because I know how to see the full circle, as my problem is with cropping the circle, but it's just something to keep in mind.
Also there will be a text div within the circle—right now it just says 'text' and I made it transparent for reference. I know this might need more divs to accomplish, but I don't really know where to go from here.
Please let me know if there's anything I can clear up about my question—sorry if it seems confusing!
Edit: Below is my first try, but it has been changed so it can now be seen here.
/*original on: http://codepen.io/mezzotessitura/pen/kfenK */
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>
<style>
body {
text-align: center;
background-image:url(images/background.jpg);
background-size: auto;
color: black;
}
.box {
background-color:#00a886;
padding:5px;
top:-10%;bottom:0;left:15%;right:15%;
width:55em;
height:55em;
position:absolute;
border-radius:50%;
}
.textbox {
height:auto;
margin:5em;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#fff;
opacity:.25;
}
</style>
</head>
<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>
try background-size:cover on the body. but I would make it cross browser friendly.
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
This should work better for you. http://codepen.io/anon/pen/utkbF
Using css to create the circle:
.box{
border-radius: 50%;
background-color:#00a886;
margin: auto;
}
I received an answer on Reddit here.
Uses vw to accomplish the responsive aspect. And transform for centering it (from this css-tricks article). I used position: absolute instead of fixed, but both do the same job in this case because div.box is positioned relative to the body.
I currently have a dynamic header image that resizes to the size of the browser. (exactly like this: http://www.theadventurists.com/ ) But currently it overlaps my other content. What I actually want is the image to take up the screen and scroll down to see the content.
The website I linked, how do they do this without overlapping content? Is there JS involved? The closest I have gotten to replicating it is having the div below have margin-top 100%. But that is a bad fix due to the margin becoming too large when the browser is certain sizes.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ blue being the image, red being content.
You're right on with setting margin-top 100% as not the best way to go about it. There were a couple of issues with your JSFiddle - the background URL was pointing to an imgur page and not the actual JPG, so I changed that. Also, you had the css selector page which instead needed to be #page to correctly target the div.
My approach for solving your issue was to change the #test_bg height to 100% and remove absolute positioning. By taking away absolute positioning, #test_bg becomes part of the document flow and the next div will automatically be positioned right below it, which is what you wanted. The other thing you need to do in order to be able to set that div to 100% height is to also set the body and html height to 100% - otherwise you'd see that setting #test_bg to height=100% wouldn't do anything. Here's the JSFiddle.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
thanks for help, ended up with this
html{
position:relative;
min-width:950px;
height:100%;
background:black url(images/GrassBG.png) repeat-y top center;
font:13px "Lucida Grande",Helvetica,Arial,sans-serif;
}
body.main{
width:950px;
margin:0 auto;
position:relative;
}
is there any way when using a div for a background image- to limit the height to only the content displayed?
im putting the background image in a div because i want it centered via position:relative but the image doesnt show up unless i put a height on the div, and thats not what i want because i dont want to be able to just scroll down to the bottom of the image where theres no content
ive tried putting the background image on the body css but if the browser is less than the width of the image, it just throws it over to the left and you can only see half of it- is there no way to make the background position:relative on the body?
sorry if that doesnt make sense ><
thanks
why can you not use Position:relative; on the body?
You can set your div's height to 100% and set it with no-repeat to keep it from propogating throughout the div. Make sure all of its parent elements contain a 100% height though (all the way up to body). It won't force itself, then, to be a certain height. It will just fill the page.
This is all assuming, of course, that you don't care to interact with what's underneath the div in question.
<style>
body,
#parent {
height: 100%;
}
#the_one_with_the_background {
background: url('background.png') no-repeat top center;
height: 100%;
width: blahpx /* You're still going to have to define a width of some sort */
}
</style>
<body>
<div id="parent">
<div id="the_one_with_the_background">
</div>
</div>
</body>