I have a header at the top of my page which have two images, one of them is only visible when the viewport is large ( > 940) and the other only showed on mobile. To achieve this behavior, I'm using Bootstrap 3 and their defined sets of media queries:
<header class="container">
<div class="row">
<div class="col-lg-4 hidden-xs">
<img src="img/hi-res-logo.png">
</div>
<div class="col-xs-12 visible-xs">
<img src="img/small-logo.png">
</div>
</div>
</header>
So far, no big deal, the previous code does the job well, but what I want is prevent the load of the large image file itself on mobile to avoid unnecessary data consumption... so how to achieve that?
Set image as a background and use media query in CSS.
<div class="container">
<div class="row">
<div class="col-lg-4" id="my-div"></div>
</div>
</div>
CSS
#media (max-width: 700px) {
#my-div {
background-image: url('img/small-logo.png');
}
}
#media (min-width: 700px) {
#my-div {
background-image: url('img/hi-res-logo.png');
}
}
**I think it is better to use single media query in this case.**
#my-div {
background-image: url('img/hi-res-logo.png.png');
width: 100px; /*image width - please change as per your image*/
height: 100px; /*image height - please change as per your image*/
}
#media (min-width: 700px) {
#my-div {
background-image: url('img/small-logo.png');
width: 200px; /*image width - please change as per your image*/
height: 200px; /*image height - please change as per your image*/
}
}
Related
I've been working with a Bootstrap portfolio where I am trying to use particle.js on the profile picture.
I set the particles inside a DIV and gave it a bg-image with profile photo. The fact is, when I reload the screen on XL screen and resize the screen to xl > lg > md, it stays fine. But when The screen size increased to md > lg > xl, the canvas height doesn't decrease according to its parent. Please HELP!
Here is the link:
https://sabbir030.github.io/portfolio/
Canvas Height Issue
<header id="main-header">
<!-- full row for image to the left and others to the right -->
<div class="row no-gutters">
<!-- images to the left with 4 col -->
<div class=" col-md-5 col-lg-4">
<!-- PARTICLE JS WITH PROFILE PICTURE -->
<div id="particles-js"></div>
</div>
<!-- Name and Menu to the right with 8 col -->
<div class=" col-md-7 col-lg-8">
</div>
</div>
</header>
#particles-js {
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url('../img/profile.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
You can define max-width, max-height and margin: 0 auto on #particles-js id for centering particle div.
#particles-js {
max-width: 380px;
max-height: 401px;
margin: 0 auto;
}
Here's what worked for me
// the element in which you want to play the particles animation (in my case the body element)
var particleAnimationContainer = document.querySelector('body');
// initialize the dimensions of the animation container; in my case with the avalaible screen dimensions
var screenWIDTH = screen.availWidth;
var screenHEIGHT = screen.availHeight;
particleAnimationContainer.width(screenWIDTH);
particleAnimationContainer.height(screenHEIGHT);
//launch the animation particlesConfig provided in particles.json
particlesJS("id-of-body", particlesConfig);
I'm a new-bee and I am trying to build a web-page which has a background image throughout the application.
Problem is that when I move further in the application after login page and all, there is a page called family details which has a scroll-able content but due to the background image the scroll bar does not appear.
I've tried using image tag instead of using background image but then the content does not appear over the image, it appears below the image.
App.component.html
<div class="background-image">
<router-outlet></router-outlet>
</div>
styles.css
.background-image {
background-image: url('assets/icf.jpg');
background-position: center top;
background-size: 100% auto;
}
With image tag
App.component.html
<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>
You could use your image tag method, and assign a lower z-index to the img tag, than the rest of the content
<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>
.img{
background-image: url("https://dummyimage.com/200x200");
z-index: 0;
height: 200px;
width: 200px;
}
.content{
z-index: 1;
}
<div class="img">
<div class="content">TEXT ABOVE IMAGE</div>
body {
background-image: url('https://dummyimage.com/200x200');
height: 100%;
width: 100%;
}
<html>
<body>
<p>Test data</p>
</body>
</html>
Try adding image on Body tag using background-image and use repeat-x, repeat-y property from css.
Then the image will be at the background always.
Add the image to the index.html, and make sure that the div which houses your angular code has a higher z-index; relevant index.html below:
<div class='bkgClass'>
<div class='insideClass'>
<my-app>loading</my-app>
</div>
</div>
<style>
.bkgClass {
height: 100vh;
width: 100vw;
background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
}
.insideClass {
z-index: 1;
}
</style>
No change to your app.component, or any other components;
you can check a working stackblitz here
I have a button that changes its height based on the screen size because of the text line-breaking.
When the screen size is large enough, the button fits perfectly:
But when it gets smaller, the button stops being centered:
I tried applying #media settings:
#media (max-width: 767px) {
#footer-content input[type="button"],
#footer-content button {
margin-top: -22px;
}
}
#media (min-width: 768px) {
#footer-content input[type="button"],
#footer-content button {
margin-top: -10px;
}
}
And when the line break happens, it works perfectly:
But when it doesn't and the screen is smaller than 767px, it gets decentered again:
So I was hoping there was anyway of doing the CSS based on the button's height instead of the screen's width, but the research I've been making hasn't helped much, so, is there anyway of doing this via CSS or will I be forced to use javascript?
Try using flexbox. If this is actually an input type range you shouldn't even need to specify align-items: center; to get it to work.
https://jsfiddle.net/vo4xcrm5/
CSS
.wrapper {
display: flex;
margin-top: 100px;
}
.range {
width: 100%;
}
.button {
max-width: 15%;
}
HTML
<div class="wrapper">
<input class="range" type="range" />
<span class="button">
Some type of button-like thing
</span>
</div>
you can use display table and vertical align middle property so that the button and the range slider are always at the center of the container , something like the code below
<div>
<div style="display:table">
<div style="display:table-cell;vertical-align:middle"><input type='range'></div>
<div style="display:table-cell;vertical-align:middle"><input type="submit" value = 'something'/></div>
</div>
</div>
Hello guys I'm trying to make simple parallax effect within bootstrap grid system and I've run into a problem. I made two divs side by side and I want one div to hold static image while other should have parallax effect.
I have a problem with parallax div background-size property no matter what I try I can't make it to cover my parallax div the way I want it, background image always end up being larger then it should be or not aligned correctly.
This is my code:
HTML:
<section id="twoImages" class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="parallax"></div>
</div>
<div class="col-md-6">
<img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
</div>
</div>
</section>
CSS:
body {
margin-bottom: 50em;
}
#twoImages {
padding: 0;
margin: 0;
}
#twoImages .col-md-6 {
padding: 0;
margin: 0;
}
#twoImages .parallax {
/* The image used */
background-image: url("https://placebear.com/715/470");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the codepen so you can better understand my problem https://codepen.io/Karadjordje/pen/VpeBzp
Here is your answer
you need to use jquery
check this https://codepen.io/parthjasani/pen/YZwJMq
remove
background-attachment: fixed;
from css
and add this jquery code
var $ = jQuery.noConflict()
$(window).scroll(function(){
var scroll = $(this).scrollTop()
$(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})
Below is my code for simple slider(it currently does not work because I have not implemented javascript yet). Right now this slider has 2 images(with different resolution ofcourse). What I did is I .sliderContainer I gave width 2520px and to .wrapper I set overflow to hidden. This is something normal I do with slider or carousal.
Now what would happen if I add an additional image that is the number of images become 4 or 5 or 6 or 20 lets say. Then I will go inside the code and keep changing the width of .sliderContainer to make it properly work. Now I need a way where I do not have change the width of .sliderContainer everytime but it should happen as new images are added. New images could come from database from server in json object.
How can I achieve this?
Below is my code.
HTML
<div class="wrapper">
<div class="sliderContainer">
<div class="slider"><img src="http://googleplus-covers.com/covers/nature_balloon_ride.jpg" alt=""></div>
<div class="slider"><img src="http://p1.pichost.me/640/10/1326822.jpg" alt=""></div>
<div class="slider"><img src="http://googleplus-covers.com/covers/coludy_mountains_nature.jpg" alt=""></div>
</div>
</div>
CSS
.sliderContainer {
width: 2520px;
}
.wrapper {
overflow: hidden;
}
.slider {
float: left;
}
Here is JSFIDDLE
Here is an example. Give your image and wrapper width:100% and white-space:nowrap to your wrapper
.wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.wrapper img {
width: 100%;
}
<div class="wrapper">
<img src="http://googleplus-covers.com/covers/nature_balloon_ride.jpg">
<img src="http://p1.pichost.me/640/10/1326822.jpg">
<img src="http://googleplus-covers.com/covers/coludy_mountains_nature.jpg">
</div>