New to CSS styling. I have a responsive background image on my page, and I want to have a circular logo positioned at the bottom center of it. I want this image to stay in the same position (in relation to the bottom of the background image) no matter how small/big the view is.
I've been playing around with the images padding and positioning, but neither are responsive. When the screen is smaller, the image moves up. When it's bigger, the image moves down. I want it to stay in the same position.
Here's a quick fiddle of my most recent attempt:
https://jsfiddle.net/ybeuvn9m/
And the code:
<div class="container-fluid">
<div class="row">
<div class="splash col-sm-12">
<div class="photo">
<img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png">
</div>
</div>
</div>
</div>
.logo {
padding-top: 200px;
width: 10%;
margin: 0 auto;
display: block;
}
.splash {
background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: overlay;
}
If I am understanding correctly you want an .photo to always be in the center of .splash. For this, you should use Flex-box.
add the following to your code:
.parentDiv{
display: flex;
justify-content: center;
align-items: center:
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... for reference.
You probably want to absolutely position it inside the main image div. Here's a modified version of your JSFiddle: https://jsfiddle.net/jameson5555/ybeuvn9m/1/
Here are the updated .logo styles. You'll also need to add position: relative to your container to make the .logo's position be relative to it.
.logo {
position: absolute;
bottom: 0;
left: 50%;
width: 40px;
margin-left: -20px;
display: block;
}
.logo {
padding-top: 150px;
width: 110px;
margin: 0 auto;
display: block;
}
Your logo should have the constant width of your logo.
Related
I am trying to accomplish placing two parallax background-images side by side while keeping their aspect ratio. The issue I am running into is that each image appears to be getting cut in half vertically. I have tried using different values in both background-attachment and background-size to no avail. Removing background-attachment: fixed; from the code below fixes the aspect-ratio issue but loses the parallax effect. Does anyone know how to accomplish both simultaneously?
.image-left {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="image-left"></div>
<div class="image-right"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
Fiddle for above code here.
I have also attempted to use the jQuery function from this post but was unable to get it to work with side by side images. (see fiddle)
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
As others pointed out, I don't think you can achieve your goal via background images...
So I tried another approach that consists basically on:
- Having two sections: one for the images, another for the content.
- As for the images, wrap them into an element and use position fixed. They are positioned at the very top of the element, should you want to change this, you can play with top property.
- As for the content, both regions are also wrapped in a container with position absolute.
- The content at the bottom will be responsible for the 'breathing' space in the images, so, you need to play with margin-top to achieve desired results.
Some considerations:
- The given example works at the moment only on desktop, tested on fulls screen laptop (around 1680px width).
- If you shrink the screen, everything goes really bad, thus, you will need to adjust all measures for mobile via media queries.
- The bottom element have a min-height attribute just for demonstration purposes.
All given, I'm not quite sure if this is something I would recommend.
Can you actually merge both images into one? This way, you can just use the background approach, and this development would not be needed.
What I don't like about my approach, is that it contains a lot of fixed values on positions, and eventually, this would introduce maintainability issues.
I hope it helps!
.image-wrapper {
position: fixed;
top: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.image {
width: 100%;
}
.content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.content-bottom {
margin-top: 300px;
min-height: 1000px;
}
<div class="image-wrapper">
<img class="image" src="https://www.gstatic.com/webp/gallery/1.webp">
<img class="image" src="https://www.gstatic.com/webp/gallery/2.webp">
</div>
<div class="content-wrapper">
<div class="content">
<h1>Lorem</h1>
</div>
<div class="content content-bottom">
<h2>Ipsum</h2>
</div>
</div>
As avcajaraville pointed out, the best approach is to have a container for the images with position fixed.
Here is my solution, using this idea, but working without needing size adjustments
Note that since now the images cover only half the width of the screen, they will cover also half the height. This could be fixed having images in portrait mode. To get a more nice result with the current images, I have added another row of images, now with the order reversed (visible only for some screen ratios)
.images {
position: fixed;
width: 100%;
z-index: -1;
}
.images div {
display: inline-block;
width: 49%;
margin: 0;
height: 500px;
background-position: center;
background-size: cover;
}
.image-left {
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.filler {
height: 500px;
}
<div class="images">
<div class="image-left"></div>
<div class="image-right"></div>
<div class="image-right"></div>
<div class="image-left"></div>
</div>
<div class="content">
<h1>Lorem</h1>
</div>
<div class="filler"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
.flexrow {
display: flex;
flex-flow: row wrap;
}
.flexrow > .image {
flex: 0 1 50%;
min-height: 350px;
background-size: 100%;
}
.img1 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}
.img2 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="flexrow">
<div class="image img1"></div>
<div class="image img2"></div>
</div>
<div class="content">
<h1>Ipsum</h1>
</div>
think this is what you're looking for, remember that min-height property on images may break this aspect ratio when no space are available (on resize, low res).
So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.
Consider the following:
/* Main row */
.main-row {
width: 100%;
display: inline-flex;
z-index: -1;
position: relative;
}
.spacer {
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
and HTML
<div class="main-row">
<div class="main-row left-pane">
<h1 class="main-row title">Changing The Way</h1>
<p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
</div>
<div class="main-row right-pane">
<img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
</div>
</div>
<div class="spacer"></div>
I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div
I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.
Everything will overlap if you adjust the actual position of the spacer, like so:
.spacer {
top: -200px; /* This */
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
I created a css sprite to combine several images appeared in my homepage. However I now have issues displaying those images.
You see that the images (store logos) are not displayed centrally. Here is my html code:
<div class="slider-slick">
<?php foreach($stores as $store){?>
<div class="slide">
<div class="client">
<div class="sprite sprite-<?php echo $store->_storeName?>"></div>
</div>
</div>
<?}?>
</div>
The css for the sprite is:
.sprite {
background-image: url(../images/spritesheet-logos.png);
background-repeat: no-repeat;
margin: auto;
}
.sprite-store1 {
width: 149px;
height: 71px;
background-position: -5px -5px;
}
.sprite-store2 {
width: 148px;
height: 23px;
background-position: -164px -5px;
}
and the parent div is:
.client {
padding: 70% 0 0;
background: #ffffff;
}
After removing the padding they look like:
I ve been trying all different options with margin but couldnt really make it. Any ideas how to make them look like this:
Try using flexbox:
.client {
display: flex;
justify-content: center;
align-items: center;
}
Don't use padding to center the inner elements with different height.
Give height to the parent and fill the bg color
.client {
padding: 0;
background: #ffffff;
height: 71px;
}
and position the inner div using transform, so it will be center with any height.
.client > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Try this in your .sprite css:
background-position: center;
(I found it here)
I'm just working on a simple HTML page but still struggling with the divs.
The plan is: a fullscreen background and four horizontal buttons next to each other on the bottom. The buttons are currently mapped to the background image - so I could just add four invisible layers (divs) with some hrefs for example. Otherwise I would add them manually (in four single jpgs) to the bottom...
Howsoever, I want the whole site to (borderlessly) scale up and down to variable screen resolutions. Therefore also the sizes of the divs/images should scale equally and keep its position.
What I've got so far:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
<body>
<div class="background">
<div class="img">
<img src="background.jpg">
</div>
</div>
</body>
At this point I only have the background set up: its in an img-div within a background container with absolute positioning.
How could I add the four buttons now to stick at the bottom of the background a keep its relative size and position when the screen resolution changes?
:)
Take the button images out of the background image, set the body rules as follows (with background-image), add a div at the bottom and put the buttons in there (I chose DIVs with background-images for the buttons, but of course you can also use <button> tags. Adjust the "bottom" and button heights and the button margins as needed:
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(background.jpg) center center fixed;
background-size: cover
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
.button {
display: inline-block;
width: 80px;
height: 50px;
margin: 10px;
}
.button1 {
background: url(button1.jpg) center center fixed;
background-size: cover
}
.button2 {
background: url(button2.jpg) center center fixed;
background-size: cover
}
.button3 {
background: url(button3.jpg) center center fixed;
background-size: cover
}
.button4 {
background: url(button4.jpg) center center fixed;
background-size: cover
}
HTML:
<body>
<div class="content">
(your content)
</div>
<div class="bottom">
<div class="button button1">(button text 1...)</div>
<div class="button button2">(button text 2...)</div>
<div class="button button3">(button text 3...)</div>
<div class="button button4">(button text 4...)</div>
</div>
</body>
Thanks for the quick help!
The code looks good so far. But I still have the problem that the buttons change its size when I rise or decrease the screen resolution. Is there a way to give them fixed sizes in relation to the whole screen? "buttonX" should always have x% of the screens width and x% of its height... And I don't want the actual visible positioning resp. margin to change when the resolution changes :/
But many thanks so for!