Gosh not even sure how to ask this. I have a slideshow, with currently only one slide, that displays the background main image of my website. I'm trying to create a media query that will swap out the large background for another image, better suited for mobile. I "seem" to have created a query that's working but it doesn't replace the main image, it loads my new image "behind" the main image. ???
Here is the HTML..
<div id="home">
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- THE FIRST SLIDE -->
<li data-transition="zoomout" data-slotamount="1" data-masterspeed="700">
<img src="images/1.jpg" alt="" />
}
<!-- THE CAPTIONS IN THIS SLIDE -->
<div class="caption big-text lft"
data-x="center"
data-y="350"
width="10px"
data-speed="700"
data-start="700"
data-easing="easeOutExpo">
<div class="big-text"><span4>YOUR IDEAS REALIZED</span4></br><div><a class="button3 scroll" href="#contact">CONTACT US</a></div></div>
</div>
</li>
</ul>
</div>
</div>
And here is my media query
#media only screen and (min-width: 320px) and (max-width: 414px) {
.tp-banner-container .tp-banner >ul >li .tp-bgimg:nth-child(1) {
background:url('../images/1_mobile.jpg') no-repeat center center;
}}
According to the inspector on my browser, it "seems" like it worked but loads behind the main image. Hopefully you can see this screen capture...
Anyone know what I need to do to make the mobile background replace the one the slideshow is trying to load? Any information is greatly appreciated!
From what I can see in the image(and its difficult to really know for certain from an image) you have two background-image css properties on the same element, one inline in the html, and one in the media query. Whenever there are two conflicting css properties, the inline one always takes precedence. If you cannot change the inline background-image property, try adding !important to the media query, but that may not work either. Cant check myself on an image. But that is the cause of your problem.
If there's javascript happening on it, you may need to override each background attribute individually as opposed to just using a single line "background" attribute.
Related
I have background images in my CSS file that are quite heavy. For that reason, I would like to load them using Lazysizes, which loads content as you scroll on my site.
My github hosted page
To enable load on scroll the image needs to be inside the HTML using the class lazyload and data-src. This works very well for me on all the assets on the site but I have some background images in my CSS that I have tried to move over to the HTML, but I fail to style it and look and work the way the backgrounds currently does.
I did not write the entire CSS on the site and I'm stuck making the current background images act exactly like they do now, but give me the possibility to just have the image references in the HTML.
My attempts have resulted in the image being stretched or won't use the breaking points as all current backgrounds work with or the background resulting in a square in the middle of the page.
So the challange for me is not the actual HTML, or getting it to load using lazysizes. The challange is getting the CSS to work.. HTML element with the backgrounds I'm trying to change is attached below:
<section class="proj">
<hgroup>
<h2>Socialmist</h2>
<h6>Instagram with music from SoundCloud</h6>
</hgroup>
<div class="mw by full">
<img class="wide">
</div>
</section>
Thank you for taking your time, much appreciated!
Made it work. Attached code below.
.yay {
max-height : 550px;
background-repeat : no-repeat;
background-position : center;
object-fit : cover;
}
<section class="proj">
<hgroup>
<h2>Placeholder</h2>
<h6>Placeholder</h6>
</hgroup>
<div>
<img class="wide lazyload yay" data-src="img/sm/bg/7T5C5861-s.jpg"/>
</div>
</section>
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
I'm building the tablet version of a site through css max-width media queries. Adapting styles have been easy so far.
But I found for one part of the site I need to show divs with 2 images instead of 3 and I can't find a way to do that with css.
Example:
Site version
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>
Tablet version (if max-width is whatever, show only two divs)
<div>
<div>Image1</div>
<div>Image2</div>
</div>
Any ideas?
Thanks!
EDIT
Ok, I'll try to be more specific since every answer has been related to display:none and though that's a great solution, it wouldn't work for what I'm trying to do.
The divs are part of a slideshow. In the full site version the slider shows groups of three images. So in the tablet version, the third image would now be part of the second group (but not disappear):
<div>
<div>Image1</div>
<div>Image2</div>
</div>
<div>
<div>Image3</div>
<div>Image4</div>
</div>
And so on...
I'm not sure if this can be done through css or if the problem needs to be addressed with some kind of in-html script. That's why I asked for a solution without css.
Something like this would be good... The .hideme class of course can be placed inside a specific media query, and obviously can be renamed.
CSS
.hideme { display: none; }
HTML
<div>
<div>Image1</div>
<div>Image2</div>
<div class="hideme">Image3</div>
</div>
Assuming there will only ever be 3 divs there and you always want to hide the 3rd one, you could do it like this:
div:nth-child(3) {
display:none;
}
JSFiddle
The best way is to specify in the media-query the div that you want to "hide".
Something like:
<div>
<div>Image1</div>
<div>Image2</div>
<div class="ThingTohide">Image3</div>
</div>
#media only screen and (min-width:300px) and (max-width:480px) {
.ThingTohide {
display: none;
}
}
try this with jquery
<div>
<div>Image1</div>
<div>Image2</div>
<div class="move">Image3</div>
</div>
<div class="group2">
<div>Image4</div>
</div>
jquery code
$(document).ready(function(){
if ($(window).width()<640) { //to check if it's on mobile device, or any other method if it's not suits you
$('.move').prependTo('.group2');
};
});
This may sound stupid of me, but why does your title say "without CSS" when you're searching for a solution in CSS?
Aside of that, does your tablet version actually have only 2 divs coming from the backend, or is it the way it is supposed to be rendered?
In the second case you can just use display: none on the third div.
div > div:nth-child(3) {
display: none;
}
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>
http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
I'm developing a small vCards website. I'm using the Twitter Bootstrap LESS files as a base for the responsiveness and the grid.
I had an issue before, the grid wasn't responsive (Stack Overflow question) and based on the answer I realized that I had to include the responsive.less file together with the bootstrap.less file in order to get the responsive features.
After having fixed that issue, I still get more weird behavior:
<div class="headline-container pull-left">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>Frontend Developer</h4>
</div>
</div>
Inspect the DOM and look for the above markup. Now if you start resizing the window down to the least it can go, between 410px and 514px, you will notice that the markup will inherit some CSS that is supposed to be applied for the MQ rule #media (max-width: 480px) { }, but just a part of it, as Twitter Bootstrap also has some CSS for that rule which is only applied when going beyond 410px and not above.
Did someone encounter the same behavior before, and if so is there a fix for it?
EDIT : The CSS changes that you should look for is the font sizes and margin / padding on the headline :
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
The above text will be the one which behaves a bit weird.
If you are talking about the <h1> heading not being responsive, you can use slabText or fix it with an wrapper.
your html is not what you post , it is
<figcaption class="headline-container">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
</div>
</figcaption>
And I can't see any query that states 410px (the one you say should be applied when "going betond 410px ")
Can you comment what is the rule that should be applied and isn't ?