Responsive or Transparent Background Image
I am creating a container with a background image behind. I have no problem on desktop or large sizes. However, when the window is resized, text appears at the top of the image and the text becomes unreadable. Do you have a solution about this? Perhaps change the opacity of the image to smaller dimensions, or remove the background image entirely and use img src instead? Here's the fiddle
<div class=" network container-fluid">
<div class="row">
<div class="container">
<div class="col-md-6"></div>
<div class="col-md-6">
<h1> Lorem Ipsume</h1>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
</div>
<br>
</div>
</div>
.network {
background: url(http://i.imgur.com/w5BnMSf.png), #f6f8f8;
background-repeat: no-repeat;
height: 50%;
background-attachment: fixed;
background-size: contain;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.network h1 {
font-family:'Open Sans', arial, sans-serif;
font-weight: 300;
font-size: 49.4000015258789px;
color: dimgray;
padding-top: 40px;
}
.network p {
font-family:'Open Sans', arial, sans-serif;
font-weight: 300;
font-size: 19.4000015258789px;
color: dimgray;
text-align: justify;
}
source to share
I changed your HTML and CSS a bit and I think this is the result you want:
HTML:
<div class=" network container-fluid">
<div class="row">
<div class="container">
<div class="col-xs-6 img pull-left"></div>
<div class="col-xs-6 pull-left">
<h1> Lorem Ipsume</h1>
<br>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
CSS
.img {
background: url(http://i.imgur.com/w5BnMSf.png);
background-repeat: no-repeat;
height: 500px;
background-size: contain;
background-position:50% 50%;
}
.network {
background-color:#f6f8f8;
height: auto;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.network h1 {
font-family: 'Open Sans', arial, sans-serif;
font-weight: 300;
font-size: 49.4000015258789px;
color: dimgray;
padding-top: 40px;
}
.network p {
font-family: 'Open Sans', arial, sans-serif;
font-weight: 300;
font-size: 19.4000015258789px;
color: dimgray;
text-align: justify;
}
Here's the solution at JsFiddle
Hope it helps :-)
source to share
You can use a media query to change the opacity or remove the background when you reach a certain height. You can use height / width / etc media queries.
Fiddle - Play with the height of the iframe by pulling the divider between the css window and preview box up and down.
.network {
position: relative;
height: 50%;
width: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.network::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://i.imgur.com/w5BnMSf.png) , #f6f8f8;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
content: '';
}
@media (max-height: 700px) { /** play with the numbers to find the right height **/
.network::before {
opacity: 0.5;
}
}
@media (max-height: 500px) { /** play with the numbers to find the right height **/
.network::before {
display: none;
}
}
source to share
You can also do a shadow trick on small screens.
https://jsfiddle.net/azvmaby1/
@media (max-width: 768px){
p {
text-shadow: #f6f8f8 1px 0px, #f6f8f8 1px 1px, #f6f8f8 0px 1px, #f6f8f8 -1px 1px, #f6f8f8 -1px 0px, #f6f8f8 -1px -1px, #f6f8f8 0px -1px, #f6f8f8 1px -1px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px;
}
}
source to share
I am using a transparent or semi-transparent div to hold the text so that it makes an impression
- Here's how: Transparent
- PS: Opacity is your challenge when it feels right.
.container{background:rgba(255,255,255,0.6);}
- Also you can use Transparent Blur
.container{
-webkit-filter: blur(10px);
filter: url('blur.svg');/*look below for creating blur.svg*/
filter: blur(10px);
}
create blur.svg // copy content to file and save as blur.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>
source to share