I have a standard container with a width of 1080px. I am wanting a floating image to appear on the right side of the container but when you scroll down, the image scrolls down also. I am also wanting the floating image to stick to the right side of the conainter even when you resize the window browser.
I have tried putting the parent div in position relative and the floating image with a position absolute and the image will stay to the right side of the parent div but when I scroll down it stays the same position instead of scrolling down.
This is the code that I have used so far -
CSS -
.santa-wrapper{
position: relative;
width: 1200px;
margin: 0 auto;
}
.santa{
background-image: url("images/santa-head.png");
background-repeat: no-repeat;
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: 1;
}
.santa-body{
background-image: url("images/santa-body.png");
background-repeat: no-repeat;
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: -1;
}
HTML -
<div class="santa-wrapper">
<div class="santa"></div>
<div class="santa-body"></div>
</div>
To get the background image to stick to the bottom right you will need to add this code into your CSS.
background-position: right bottom;
To get the div to scroll down I think you will need to include some Javascript.
You can use position:fixed;
.fixed-right {
position:fixed;
right:0px;
top:20px;
}
<img class="fixed-right" src="yourimage.jpg" />
Related
<div class="divOverlay">
<div class="div-overlay-content" >
<div class="pointer" ></div>
</div>
</div>
I have the following setup where I have a div with a background image and another pointer that always stays in the center. I want to move the background image dynamically to different positions. I am doing that by adjusting the properties
background-position: 0% 0%;
So if I set it to 50% 50%, then the center of the image is aligned with the pointer in the center. which is fine. But I have to tackle the corner scenarios .for eg:- if the value is 0% 0%, then I should have the top left corner of the image aligned to the center (with white background space where there is no image)
How to achieve this just by using CSS (without modifying the image to add the extra white spaces)?
Here is the link to jsfiddle https://jsfiddle.net/mkd914gf/21/
Here is the CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.div-overlay-content{
height: 100%;
width: 100%;
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
background-position: 0% 0%;
}
.pointer {
left: 50%;
top: 50%;
background-color: red;
position: absolute;
width: 10px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
}
There are a couple ways you can do this, I've seen some people use ::before and ::after pseudos, or the background-attachment property (works with <img> tags, not backgrounds).
I've opted and gone for absolute positioning the entire div. So we have an absolute positioned div, and a relative positioned parent. We set the height and width for each, plus the background image using background-size. Set overflow to hidden on the overlay. Then just use top right bottom left to position the div holding the image.
I also set you up with a centering method for your red dot that takes the size of the dot into account.
Here's the fiddle: https://jsfiddle.net/9sp2te4o/1/
HTML
<html>
<body>
<div class="divOverlay">
<div class="div-overlay-content" ></div>
<div class="pointer" ></div>
</div>
</body>
</html>
CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow:hidden; /* Full hidden */
position:relative; /* Set relative so absolute children are contained */
background-color:rgba(255, 0, 0, 0.5);
margin:10px;
}
.div-overlay-content{
position:absolute; /* Absolute the div for positoning */
height: 100%;
width: 100%;
background-size:cover; /* Cover entire div */
left: -25%; /* position the div instead of the image */
top: -25%; /* position the div instead of the image */
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
}
.pointer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Position while taking dimensions of div into account */
height:10px;
width:10px;
background-color:red;
}
I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I am attempting to make the header/menu bar on this website static (fixed) so that it is always present at the top of the screen, and a particularly long website scrolls 'behind' it. I have accomplished this before on fixed width websites, but this website is fluid width and I have not been able to accomplish this yet without breaking the header.
Could someone potentially tell me where/what I need to edit in my CSS? I believe I need to add a position:fixed; element somewhere, perhaps in this section, but it doesn't seem to accomplish my goal in the same way as on a fixed width website.
.art-header
{
margin:0 auto;
background-repeat: no-repeat;
height: 170px;
position:relative;
background-image: url('images/header.jpg');
background-position: center top;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center top;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header-inner{
position: relative;
min-width: 840px;
max-width: 1920px;
width: 50%;
z-index: auto !important;
margin: 0 auto;
}
try this, merge your .art-header & .art-nav inside a div, and class fixed to it like this
<div class="fixed">
//div .art-header & nav .art-nav here
</div>
then add the css for fixed
.fixed {
position: fixed;
z-index: 100;
}
and make some margin for .art-sheet
margin-top: 241px; /*the height of the fixed div*/
here's the JSFIDDLE
I want the header to have an image for background. And I want that background image to have a 100% width and the rest of the image for the height (for whatever maintains aspect ratio for height).. and the header elements on top.
I tried to apply..
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
}
but this makes the background stops right where the header elements stop (the navigation menu).. I want the background image to go all the way down till the image itself is finished..
I'm sorry if this doesn't make any sense.
If I've understood this correctly the height of your header elements is less than the height of your picture.
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
height: <height of the image in pixels>px
}
This will make both the same height so that the image will not be cut off
You can use the z-index property of the css.
CSS:
header
{
position: absolute;
top: 0px;
right: 0px;
height: auto;
}
span
{
z-index: 2;
}
img
{
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
HTML:
<header><span>Your text here</span><img src='Your image.JPG'/></header>
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.