This is my css that adds images for parallax scrolling. It works fine, but when it comes to the mobile view, the image is showing but not as the responsive full image.
#parallax-world-of-ugg .parallax-two {
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image:url(../img/sri-lanka.jpg);
background-attachment: fixed;
background-size: contain;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
This is mt html:
<div id="parallax-world-of-ugg">
<section>
<div class="title">
<h3>Let's Find out about</h3>
<h1>Trip GO Sri Lanka</h1>
</div>
</section>
<section>
<div class="parallax-one">
<h2></h2>
</div>
</section>
<section>
<div class="block">
<p>
<span class="first-character sc">S</span>ri Lanka is a well known
beauty spot,where people are blindly attracted to visit this
splendid little island,because of its natural,social,cultural &
political background.
</p>
<p class="line-break margin-top-10"></p>
<p class="margin-top-10">
So the Trip Go Sri lanka is here to provide you with all
Facilities to soothe your journey. We help you to explore all
natural,cultural, social destination with best hospitality,
comfort, safety and guidance at the very best based on ECO
tourism
</p>
</div>
</section>
</div>
I think due to mobile device's significantly smaller screen sizes, default images used in a parallax effect targeting desktops will often be too large in their smaller counterparts, both in terms of dimensions and file size.
One way to fix this is by using Media-Query's and have some smaller versions of your background image.
Use the Media-Query's to change to a smaller size of the background image if the screen becomes smaller than ... pixels for instance.
You would get something like:
#media screen and (max-device-width: 860px){
body{
background-image: url(deepsea_small.jpg);
}
You haven't specified which web browser or operating system you are testing for mobile sized screens.
If, by chance, you are using an iOS device; there is a known issue with iOS devices having trouble displaying images that have both background-attachment: fixed and background-size: cover
caniuse.com cites an existing StackOverflow question as a resource for this:
Background size on iOS
I found the perfect answer for this matter and thank you for your helping..if you had this problem just visit this link..thank you..
https://inkplant.com/code/responsive-parallax-images
Related
I'm trying to get my head round Bootstrap background images. Can anyone help on the right syntax for displaying a background image when the file is local. Specifically I've got two alternative lines in my page html
<body class ="bg-image" style="background-image:
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image:
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">
The first one works and the second local one doesn't. Any corrections greatly appreciated.
Thanks,
Nick
Full page background image
we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
<!-- Background image -->
<div
class="bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');
height: 100vh;
"
></div>
<!-- Background image -->
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
For More Information: https://mdbootstrap.com/docs/standard/content-styles/background-image/
I'm trying to make a website with Dreamweaver and Visual Studio.
The problem is when I use background or backgrouand-image in CSS, the image doesn't appear.
Here is the code:
CSS
/Showcase/
.showcase{
min-height: 400px;
background-image:url("../Take2/assets/bg.jpg") no-repeat -400px;
text-align: center;
color: aqua;
}
Html:
<section class="showcase">
<div class="container-fluid">
<h1>Rent a <span>Ring Roamer</span></h1>
<p>Tired of the same old photo booth?<br>
Let our Ring Roamer, Roamer attendant come to you on the Dance Floor or at their tables!<br>
Our Ring Roamer will capture photos of your guests, photos get shared via social media.<br>
The Ring Roamer is awesome because it is on the GO!<br>
The Ring Roamer Selfie Booth has many fun features including Boomerang videos, animated GIFs, and virtual filters.<br>
Your guests will be able to share their experience instantly.</p>
</div>
</section>
The reason behind this is because you are using no-repeat -400px
When you remove the no-repeat part, the image will successfully appear.
Like this: background-image: url("../Take2/assets/bg.jpg")
Hope it helps.
I am trying to align my "cards" vertically when viewed from a mobile phone however I cannot seem to get the syntax right. I tried to 'text-align: center;' float:none' among other tries but I can't seem to figure it out. Any help will be appreciated. thank you.
/* Extra small devices (portrait phones, less than 576px) */
#media (max-width: 575px) {
.card {
display: block;
float: none;
width: 100%;
text-align: center;
}
}
<div class="card">
<img src="img/websume.png" height="240" width="356" alt="Card image cap">
<p class="card-text">My "Web-sume" was my first site to include Bootstrap 4. The site is a responsive site, with a feature only available to moblie devises. The site consist of mostly Bootstrap custom layouts.</p>
</div>
<div class="card">
<img src="img/websume_drpdwn.png" height="240" width="356" alt="Card image cap">
<p class="card-text">The "Web-sume" has several fixed images as well as a drop down section which includes my address as well as social links. I used the -web kit layouts for the 'Experience' section of the site.</p>
</div>
<div class="card">
<img src="img/websume_exp.png" height="240" width="356" alt="Card image cap">
<p class="card-text">As mentioned before, the site, when viewed through a mobile devise has a feature where if a client wants to get in contact with me they do not have to scroll all the way to the bottom of the page to get my contact information, a 'email' and 'phone' button appears for easy access.</p>
</div>
Just a simple oversight - it's the CSS comment breaking your #media query. You used // Extra small devices (portrait phones, less than 576px) initially, and in CSS, the comment syntax is /* Extra small devices (portrait phones, less than 576px) */
If I understand the problem correctly, your cards are going off the edge of the screen. This is due to the fact that while you're setting the width of .card to 100% for mobiles, you're hard-coding in the widths of the images, and not actually forcing the images to be contained within the bounds of their respective .card containers.
The best way to correct this is to specify a max width for all images:
img {
max-width: 100%;
}
Note that you'll probably also want to set height: auto, to make sure that the images don't get squashed:
#media (max-width: 575px) {
img {
height: auto;
}
}
I've created a fiddle showcasing this here.
Hope this helps! :)
I have an application that is querying the Spotify API which returns some names and images.
I am listing all of these out on my page inside cards/panels like so:
<div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks">
<div class="card">
<div class="header bg-red">
<h2 class="nameHeading">
#{{ track.name }} <small>#{{ track.artists[0].name }}</small>
</h2>
<p class="header-dropdown m-r--5">#{{ index + 1 }}</p>
</div>
<div class="body">
<i :style="{ 'background-image': `url(${track.album.images[1].url})` }" :alt="track.name" class="bg-image"></i>
</div>
</div>
</div>
The images returned can be of varying sizes and dimensions and so my bg-image class helps render these consistently on the page:
.bg-image {
background-size: cover;
display: block;
width: 100%;
height: 325px;
background-position: center;
}
This works perfectly on desktops:
However the cards/panels get stretched when viewing on smaller screens:
Is there a way I can prevent this from happening and just scale the image down to keep it consistent with what you see on the desktop and to keep the panel in roughly the same shape?
My CSS skills are really quite basic, and so I have no clue where to start when it comes to something like this.
can you try this
.bg-image {
width:100%;
float:left;
background:url('http://media02.hongkiat.com/ww-flower-wallpapers/dandelion.jpg');
height:600px;
background-size:100% auto;
}
Setting background-size: 100% was definitely a step in the right direction. The only issue was that it then meant the image repeated above and below to fill in the rest of the height set by the .bg-image class.
Setting background-repeat: no-repeat solved this, but still left the blank space above and below.
Using some jquery $('.bg-image').css('height', $('.bg-image').width()); I was able to resize the height of the <i> tag appropriately - the issue I ran in to was that because I am using Vue, the cards weren't visible in the DOM straight after my API request.
To allow v-for to render these and then run the jQuery, I simply added this into my Vue method:
this.$nextTick(function()
{
$('.bg-image').css('height', $('.bg-image').width());
});
This now resizes appropriately on desktop and mobile devices.
I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
<md-grid-tile class="green">
<img src="resources/images/food-beer.jpg" alt="beer">
<md-grid-tile-footer>
<h3>first tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue">
<md-grid-tile-footer>
<h3>second tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="purple">
<md-grid-tile-footer>
<h3>third tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.
If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.
<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>
It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.
For 2 columns and pictures that were 4600px x 3400px, I did the following:
In my css:
.tile-image {
width:100%;
height: auto;
}
In my html template:
<mat-grid-list cols="2" rowHeight="6:4">
<mat-grid-tile>
<img class="tile-image" src="../demo/tilePic1.jpg">
</mat-grid-tile>
You could either do this with targeting the image in CSS or by setting it as a background image.
Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.
.green img {
max-width: 100%;
height: auto;
}
So going with a background image maybe a little better but this method isn't fully cross browser supported.
.green {
background-image: url('folder/your-image.png');
background-size: cover;
}
All the answers are nice. But you can also try
<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">