so my use case is that I have a div with a big background image and some other divs with text inside. In my css file I have a media query for max-width, so that below that width the image should disappear.
I have tried both visibility:hidden and background-image:none, but in both cases the text also disappears.
Is there a way to not make the other divs disappear? Or an alternative way to construct this structure to accomplish the goal stated above?
HTML:
<div id="teaser">
<span id="teaser-text"> Text </span>
<div id="attributes"> Some Text</div>
</div>
CSS:
#teaser {
width: 100%;
height: 0;
padding-top: 66.44%;
background-image: url('/static/main/freude2_bright1.jpg');
background-size: contain;
position: relative;
color: white;
margin-bottom: 20px;
}
Thanks a lot! :)
Is #teaser on a white background? If so, you're text may not be disappearing, but could be white on white after you've removed the image.
Try:
#media all and (max-width:480px) {
#teaser {
background-image: none;
color: #000;
}
}
If I understand correctly you want to remove the background image (or maybe color?) of a div but not effect the other content within it?
.main-div {
background-color: none;
background-image: none;
}
Related
I'm trying to achieve something with mix-blend-mode and I'm wondering if it's possible. I want to use mix-blend-mode to create a "multiply" effect, while keeping the text within it a solid white. I have seen similar issues discussed here, but slightly different than my situation, I believe...
My (simplified) HTML:
<div class="box">
<div class="content">
<div class="container">
<h1 class="header">HEADLINE</h1>
<div class="description"><p>Subhead</p></div>
</div>
</div> <!-- .content -->
</div>
...and my CSS:
.box {
display: flex;
align-items: flex-end;
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.content {
float: left;
width: 100%;
}
.container {
background-color: red;
mix-blend-mode: multiply;
}
h1, p {
color: white;
margin: 0;
padding: 10px;
}
Here's a fiddle of the result:
https://jsfiddle.net/cosmocanuck/7zhwgo0s/55/
But I need the text to remain white, not "cut out".
I'm trying to follow Rashad's response here:
Remove mix-blend-mode from child element
But my situation, while very close, is somewhat different (including using flexbox to bottom-align the element containing the text), and so far I've failed to crack this one despite many attempts.
Can anyone point me in the right direction? Thanks!
Make sure the blended background and the text are in separate stacking contexts, and that the text is rendered over the background, not under it.
The reason your current code doesn’t work is that the text element is a child of the container element that sets the mix-blend-mode. mix-blend-mode will blend all of the content of the container, including the text — there’s no escaping that.
You need two things to make this work:
Make sure that the text is not a child of the element that sets the background and the blend mode.
Make sure the text is rendered over, and thus not affected by, the element that sets the background and the blend mode.
The challenge is that the size of the background must be dependent on the size of the content. One way to do this is with CSS Grid Layout:
define one auto-sized grid area
place both the background and the text into that one area (so that they overlap)
let the text dictate the size of the area
have the background stretch to the size of the area, which is dictated by the size of the text
Then, set isolation: isolate on the text element to ensure it gets rendered above, and not under the background element.
.container {
display: grid;
grid-template-areas: 'item';
place-content: end stretch;
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.container::before {
content: '';
grid-area: item;
background-color: red;
mix-blend-mode: multiply;
}
.item {
grid-area: item;
isolation: isolate;
color: white;
}
h1,
p {
margin: 0;
padding: 10px;
}
<div class="container">
<div class="item">
<h1>HEADLINE</h1>
<p>Subhead</p>
</div>
</div>
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
I want to make big picture like this:
So just big picture, with big letters on it. I'm a newbie so please understand me, thanks! also how do i put big letters like that?
If someone would put it in.zip for me to examine that would be even better! Thanks in advance!
thats called the jumbotron
http://getbootstrap.com/components/#jumbotron
or
<div class="bigpic">
<span class="bigletters">Big Letters</span>
</div>
css
.bigpic {
postion:relative;
width: 100%;
height: 200px;
display: block;
background: url('www.pictureUlr.com');
}
.bigletters {
position: absolute;
display: inline-block
top: 40px;
left 40px;
font-size: 3em;
color: white;
}
this places a div under the menu with a width of 100% and a fixed height.
Then makes an image the background of said div. It also puts a span inside (or think on top) of that div because it is absolutely positioned
I have been struggling with something which in theory should be very simple for a few days now... and i am determined not to give up.
I am trying to achieve this:
Essentially horizontal rule, with an ornament between - the HR will span the full width of the screen.
So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a centered but failing miserably.
My Markup:
<div>
<hr>
<img src='assets/img/ornament.png' class='center'>
</div>
CSS:
hr{
height: 2px;
color: #578daf;
background-color: #578daf;
border:0;
}
I just cant figure out how to make the image appear in the centre of the HR.... Any help or pointers would be appreciated.
You can also accomplish this with a CSS pseudo element. All that's needed for HTML is the <hr>
hr:after {
background: url('yourimagehere.png') no-repeat top center;
content: "";
display: block;
height: 30px; /* height of the ornament */
position: relative;
top: -15px; /* half the height of the ornament */
}
Change the markup tp
<div class='hr'>
<hr>
<img src='assets/img/ornament.png' alt=''>
</div>
Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.
.hr { text-align: center; }
.hr img { position: relative; top: -16px; }
However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.
Check out this fiddle. You can set the ornament image as a background on the div with the ornament class.
off the cuff...
using the center image for the hr and a repeated line segment for the div...
<style>
.line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
.line {background: url(as_line.jpg) center repeat-x;}
</style>
<div class="line"><hr></div>