This question already has answers here:
How to have to background images side by side in CSS
(3 answers)
Closed 2 years ago.
I'm trying to place 2 images side to side and have some text in the center of both images, but after adding the first image in CSS with background :(url) , I cannot add a second image because it just overrides the first one and I put images directly in a div , I cannot place text inside them.
As you can see in the below HTML that if I put one image in HTML and I through CSS, I cannot place text over it and if I place it in the CSS ,they just override each other.
HTML and CSS
#image{
height: 400px;
background-color: black;
background: url("https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg");
}
<section id="images">
<h1>affortable shit</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>
Screenshot Just replace your code with this.
Use a section tag selector in css
section{
height: 400px;
background-color: black;
background-image: url(https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg);
}
<section id="images">
<h1>affortable shit</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>
Related
Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.
I need this behavior, but with a sticky element.
I hope the code explains it all:
(also have it on JSFiddle)
const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
showTooltip = !showTooltip;
if (showTooltip) {
tooltip.classList.add('shown');
} else {
tooltip.classList.remove('shown');
}
})
#container {
height: 19rem;
overflow-y: scroll;
}
.info {
background: lightblue;
padding: .5rem;
}
#tooltip {
background: gray;
position: sticky;
bottom: 0;
margin: 0 2rem;
opacity: 0;
padding: 1rem;
}
#tooltip.shown {
opacity: 1;
}
<div id="container">
<div class="content info">
Click in this div to hide/show the tooltip.
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div id="tooltip">
This tooltip should not occupy its initial space at the bottom of its parent div...
<br><br><br>
But yet its space is taken into consideration. Scroll down to see...
</div>
</div>
Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...
I'm afraid I don't have a sample but I was able to achieve this with something like:
.sticky-element
{
position: sticky;
height: 0px;
overflow: visible; // not strictly needed
}
.content
{
position: relative;
top: -100%; // or calc(-20px - 100%) to add margin
}
Then:
<div class="sticky-element">
<div class="content">
....
</div>
</div>
In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.
The best thing about this is it doesn't require you to know the height of the sticky element.
There may be some side effects but it's working OK for my needs.
I think if you switch between
display:none;
and
display: block;
rather than opacity. Then the initial white space that is being occupied at the end will not appear.
You are using opacity: 0;
to hide your element.
Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.
The better idea would be to just get rid of it for the time being:
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
Here is working JSFiddle:
https://jsfiddle.net/dyabgve5/26/
EDIT:
I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.
Or.. you can try moving that sticky class behind container like this (it works):
</div> - end of div container
<div id="tooltip">
This tooltip should not occupy it's initial space at the bottom of it's parent div...
<br><br><br>
But yet it's space is taken in consideration. Scroll down to see...
</div>
Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/
I have added a margin to the .quotes-text selector however it moves the whole quotes section down not just the text within the quotes section. Any idea what might be causing this? Code below.
.quotes {
height: 344px;
background: #bf4b54;
}
.quote-text {
font-size: 2rem;
max-width: 860px;
}
<div class="quotes">
<div class="quote-text">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta necessitatibus a autem obcaecati officiis reiciendis. - Head Chef</span>
</div>
<img src="" alt="" class="chef">
</div>
If you just want the text to move down (but not the section) use padding instead of margin.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
This will probably be a dumb question to ask you guys but I'm fairly new so please bear with me as I am willing to learn.
My problem goes like this, https://alphavirginis.github.io the navigation bar seems to be fine at the landing page, but when you go to the about it seems to have shifted left or if I tried to fix it it'll go to right. I'm quite new to web dev so I'm asking for your help. Thanks!
Here's the github repo https://github.com/AlphaVirginis/AlphaVirginis.github.io
You need to separate .navigation and .box, .right than your markup will be like this.
<div class="navigation">
Home
About
Works
Contact
</div>
<!-- Navigation Ends Here -->
than change some css
.navigation {
text-align: center; // Added
}
than wrap two boxes .box and .right in one wrapper say .box-wrapper
<div class="box-wrapper">
<div class="box">
<img src="img/Lelouch.jpg" alt="" class="box-img">
<h1> Lelouch Lamperouge </h1>
<h5> Web Developer - Software Developer </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
</div>
<div style="padding-top: 10px"></div> <!-- Prevenets Margin collapse -->
<div class="right">
<img src="img/Lelouch.jpg" alt="" class="box-img">
<h1> Lelouch Lamperouge </h1>
<h5>Web Developer - Software Developer<!--5--></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
</div>
</div> <!-- box-wrapper Ends Here -->
set the width of .box-wrapper as per your requirement
.box-wrapper::before, .box-wrapper::after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
.box-wrapper {
width: 100%;
max-width: 1170px; // change as per your requirement
margin: 0 auto;
}
.navigation in the about page you have to give text-align:center css.
It Would solve the problem.
I use this template for my website skin. In this section of press have two div that contain text and image.I want change position of image and text. The image placed in left side and texts placed in right side. My site skin has rtl direction.
<div class="fh5co-press-item to-animate fadeInUp animated">
<div class="fh5co-press-img" style="background-image: url(/DNN_test/Portals/_default/Skins/Crew/images/img_8.jpg)"></div>
<div class="fh5co-press-text">
<h3 class="h2 fh5co-press-title">Versatile <span class="fh5co-border"></span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eius quos similique suscipit dolorem cumque vitae qui molestias illo accusantium...</p>
<p>Learn more</p>
</div>
</div>
On .fh5co-press-img and .fh5co-press-text you can set the order property. Add the following CSS:
.fh5co-press-text {
order:2;
position: relative;
}
.fh5co-press-img {
order:1;
position: relative;
}
You are using position:absolute; for the elements, you have to add position:relative;.
I'm trying to make it so inside of this row there are two equal columns; text on the left side with an image on the right. The problem is when I set my first col as text and my second column with the image, I get what I want except once everything collapses my image is stacked below my text. I want my image to be above my text once stacked. I've tried using pull right but then my image is no longer centered once everything is stacked. How can I get my image on the right and my text on the left and have my image centered and above my text once stacked?
<div class="row">
<div class="col-lg-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-lg-6">
<div class="center-col">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div>
</div> <!-- end row -->
Looks like you have to offset the columns:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div> <!-- end row -->
And here is a jsbin for you. And a link where you can read more.
Btw. I had to use the "sm" grid because my screen is small, but I think you get the idea :) -- Good luck!
You want to use Gorm Casper good answer and use it at md size or even look at using #media to show not show different containers with a reverse set up have a look at this Fiddle.
Resize the window to see how it flows.
#media (min-width: 1200px) {
.desktop{display: block; }
.tablet{display: none; }
}
#media (max-width: 1200px) {
.desktop{display: none; }
.tablet{display: block; }
}