I am trying to place a image on the bottom right corner of my page and have it always be there. I have managed to do this but I have a problem when making the browser window smaller (which also is a problem while looking at it in different advices with smaller screens). When I make the browser smaller the image stays in the same size, and eventually overlaps over the other items (like my menu for example). Is there anyway to make that the image automatically becomes smaller together with the browser?
The css code I have used to place the image on the bottom right corner looks like this:
display:block;
float:right;
bottom:0;
right:0;
width:340px;
The image is a png image placed inside a div in my html.
I hope someone can understand what I mean and help me with this!
You can give the image a percentage for a width instead of a pixel width. It will then resize when you resize the window. Try setting width: 20% as a starting point and see what happens.
You can try this
<html>
<style>
img{
position:absolute;
bottom:0;
right:0;
max-width: 100%;
height: auto;
width: auto;
}
</style>
<body>
<img src="slide2.jpg"/>
</body>
</html>
resizing browser also resizes image, and is always at bottom.
Using % values for the width and height of the image should work.
Don't use floating for this case, your positioning should be absolute and don't set pixel-based sizes. If you want to set its size, you can do it by percentage, however, maybe the best solution would be to have separate themes for separate screen sizes.
Related
I'm trying to get a background image to position correctly on a mobile view. When I look at the website with inspect (or re-sizing the monitor to be a mobile view), the image shows fine. However, when I view it through a phone, the image, for some reason, seems to be re-sizing to fit the phone width instead.
#hero{
height: 100vh;
max-width: 100%;
background-image: url('http://i.imgur.com/molLHMj.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div id='hero'>
</div>
</body>
If I remember correctly, setting background size as cover would make it so that if the image is bigger than the screen width, it'll simply be hidden, but this seems to be resizing for some reason.
Edit:
Setting background-size to auto displays the image like how it looks like in chrome's inspector. This shouldn't be the case, as the wider version displays the full width/height (given that it's auto). I'm really lost on what is going on.
Edit2
Looks like only the chrome mobile version displays it that way. The default browser renders the background just like how it looks like in the desktop inspector. Really weird.
The image is resizing because you are telling it to with height: 100vh;. Additionally, the image is getting skewed because you are placing a restriction on the width with: max-width: 100%;.
Setting just max-width: 100%; (and removing the height:100vh) or removing both lines and just sticking with background-size:cover could clear this up.
But, if you want the background to cover the entire viewing area, don't place the background on the div. In fact, get rid of the div and just apply the background to the body.
Also, background-size:cover does not cause the image to hide, it causes the image to resize to cover the background available. This results in cropping when the background size is smaller than the image.
From MDN:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
You can achieve your goal like this:
.hero {
height:100vh;
width:100%;
}
.hero:nth-child(1) {
background-image:url('http://placehold.it/1920x1080');
background-size:cover;
}
.hero:nth-child(2) {
background-image:url('http://i.imgur.com/molLHMj.jpg');
background-size:cover;
}
<div class="hero"></div>
<div class="hero"></div>
The problem seemed to be the size of the image. It was around 3000 in width. When I resized it to around ~1900, the behavior returned to normal.
So I'm working with bootstrap and then I have this images which I want to put on the top right part of the page but it seems that position:absolute is not working so I don't know what I'm missing here. I've googled many times but gives me no luck, I have the same code tho. And also I've tried some of those alternatives or tips and tricks but still doesn't work. So here is my code html.
<body>
<img id="swirl-left" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" src="assets/images/swirl2-panel1.png">
This is the html structure of my images and I have this css:
#swirl-left { position:absolute; left:0; top:-10px;z-index: 2;}
#swirl-right { position:absolute; right:0;top:-11px; z-index: 1;}
I tried float:right but still doesn't make it work. I got this output as of now.
So when I re-size the browser it goes with it.I want it to stuck on the top right part of the page. What I'm missing? If I adjust the browser the images moves with it. It takes me an hour so any help will be appreaciated.
Your code works just fine to pin images to the top-left and top-right corners, if the images are smaller than the body tag.
How large are the images you're using, and how wide is your <body>?
You aren't setting any specific values, so the images are appearing at full size.
Your "output" image looks like all images are the same size as the body, so they're just piled on top of each other.
If you give them all specific width/height attributes in CSS it should work.
In this 2nd example, the images are actually 500x500, which would overlap at full-size, but the CSS width attribute makes them fit properly. You can either use a fixed pixel value, or a percentage if you want the image to be responsive.
body {
width: 900px;
}
#swirl-left {
width: 150px;
position:absolute;
left:0;
top:-10px;
}
#swirl-right {
width: 150px;
position:absolute;
right:0;
top:-10px;
}
Or, since you're using Bootstrap, you could use a class on your img tag to describe the size & # of columns you want the image to take up, like col-sm-2 or something.
<img id="swirl-left" class="col-sm-2" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" class="col-sm-2" src="assets/images/swirl2-panel1.png">
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
I can't figure out how to make it so that when a window can't display the whole image, it cuts the image on the left.
This code always cuts the right side using:
img {
position:fixed;
}
You just need to add right:0; if you want to cut the left side on resize. Check this fiddle: http://jsfiddle.net/H3Vqc/1/ and test.
Further:
If you want to resize the image when you resize the browser then use width: 100%.
If you want to hide the right side set position: absolute; and left:0;
or u can simply apply dir="rtl" on the div the image is on this results on what you want
<div dir="rtl"><img src="yourImg.jpg"/>
</div>
Strictly assuming if you are using css background you can use the background-position property to position your image, and use width and height to get it to the right size
You likely want to set max-width: 100% to the <img>, like this: http://jsfiddle.net/H3Vqc/4/
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}