I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
Related
So basically, I want it so when you hover over the image it changes to another picture.
This is my code.
#arsenal{
background-image: url(bilder/ArsenalU.jpg);
width:210px;
height:210px;
}
#arsenal:hover {
background-image: url(bilder/Arsenal.jpg);
}
<div id="arsenal"> </div>
Hover image may have different size so you have to set the image's height and width.
#arsenal{
background-image: url(bilder/ArsenalU.jpg);
width:210px;
height:210px;
}
#arsenal:hover {
background-image: url(bilder/Arsenal.jpg);
height:210px;
width:210px;
}
<div id="arsenal"> </div>
Or you can use inline Javascript
<img src='ArsenalU.jpg' onmouseover="this.src='Arsenal.png';"
onmouseout="this.src='ArsenalU.png';" />
The code is correct. However, the file path of the picture extensions is incorrect. I recommend you to work in 2 separate files, css and html. The code you wrote is working.
This is the style for the image :
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("gaming.jpg");
height:100%;
border:#00AEF2 3px;
}
and this one for the element I intend to do a hover effect which changes the background-image in .gaming:
<section class="New-era-1 list_text" >Artificial Intelligence</section>
What I tried
.New-era-1:hover .gaming{
background-image:url("just-for-fun.jpg")
}
But no luck. How do we go about this problem?
The way you're targeting your .gaming class means the HTML element associated with it needs to be inside the .new-era-1 <section> element. It should work after that. See below:
CSS
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("http://www.alien-covenant.com/app/xalien-covenant-fill.jpg.pagespeed.ic.rPyCbS72Kx.jpg");
height:500px;
width: 400px;
border:#00AEF2 3px;
}
.New-era-1:hover .gaming{
background-image:url("https://i1.fdbimg.pl/fvpxi5v1_o6b4xt.jpg")
}
HTML
<section class="New-era-1 list_text" >Artificial Intelligence
<div class="gaming"></div>
</section>
See my JSFiddle: https://jsfiddle.net/0esrq2by/
Another approach is to use jquery, to change hover effect, like this:
$('.new-era-1').hover(){
$('.gaming').css('background-image', 'url(to-your-image.jpg)');
}
This has probably been asked before, but is it possible to set the background image with css based on the data attribute?
I have this:
<div class="imageWrap" data-bigImage="someURl" data-smallImage="someUrl"></div>
and my CSS:
background-image: attr(data-bigImage url);
background-repeat: no-repeat;
background-size: cover;
I use these 2 sizes for an responsive solution, and the data attribute can be changed by an admin, so I cannot set a path to a specific file..
How can I solve this? Is there a non-javascript solution?
I don't think it can be done the way you want to.
What you could do is create two child div's, and toggle between them.
<div class="imageWrap">
<div class="bigImage" style="background-image:url('someUrl');"></div>
<div class="smallImage" style="background-image:url('someUrl');"></div>
</div>
The CSS would then look something like this:
.imageWrap .bigImage,
.imageWrap .smallImage{
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
display:block;
}
.imageWrap .smallImage{
display:none;
}
#media screen and (max-width:sizeInPx){
.imageWrap .smallImage{
display:block;
}
.imageWrap .largeImage{
display:none;
}
}
I would however prefer a javascript solution, since that wouldn't require me to preload / buffer two images.
Notice that I need to declare the img source from the html (this will be dynamic), so i dont use background here.
HTML
<div class='some-form'>
<form>
<button>...<button>
<img id="some-img" src="something"/>
<input id="some-input"/>
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
z-index: -1;
//background-size: contain; //this does not work
//background-position: center right 50px; //so this will not work
}
How can I get the image to act like contain so that I can align it the way i want?
Keep your code as-is, but change #some-img from an img to a div (and specify width and height as needed based on the image dimensions). It's not possible (at least not in a simple way) to make an img element behave as if it was using background-size and background-position properties since img elements are not backgrounds. So in order to do so, you instead make the image a div with a background-image.
Since you are dynamically populating the image src, you can instead use inline styles to define a background-image on the div, as this lets you call a PHP or other server-side function to echo the image url (which you can't do in a CSS file).
So for example, keep the CSS you have now (but add height/width or other styles to the #some-img div as needed) but replace <img id="some-img" src="something"/> with something like this:
<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>
or equivalent in whatever language or method you are using to populate the image dynamically.
There are better ways to do this as inline CSS is generally something that should be avoided, but the use in this case is not too dangerous but it'll work in a pinch and most other methods would either be equally sloppy or a lot more work.
If you include jquery, you can write a script to cheat this:
<script type="text/javascript">
height = $('#some-img').height();
width = $('#some-img').width();
src = $('#some-img').attr('src');
$('#sime-img').wrap('<div id="contain"></div>');
$('#contain').height(height).width(width);
$('#contain').css('background',"url('" + src + "')");
$('#contain').css('background-sizing','contain');
$('#some-img').css('opacity','0');
</script>
It isn't nice. You can do the same thing w/o JQuery, I just used it for convenience.
If I understand correctly, you're looking to constrain an image to the size of its containing element and center it vertically and horizontally.
This will get you pretty close, but the image will only scale up to its actual size, no bigger.
HTML
<div class='some-form'>
<form>
<button></button>
<img id="some-img" src="http://lorempixel.com/300/200/sports"/>
<input id="some-input" />
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
width:400px;
height:180px;
background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
max-width:100%;
max-height:100%;
z-index: -1;
}
fiddle: http://jsfiddle.net/XNR38/
Good luck!
I'm attempting to style a button with CSS. Here is the HTML code for the button:
<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>
Here is the CSS code.
.custombtn {
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color:#d3d3d3;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}
I thought everything was fine & dandy, until I viewed the results.
Instead of something like this with text on it:
It looks like this:
I've been reading fixes for these online for around an hour and a half, however none of them have worked. I know it's possible to style it to look like this, I just need to find a way.
normal.png
hover.png
click.png
You need to explicitly set border:none; background-color:transparent; on .custombtn.
You need to set the border to none. That should definitely solve the problem and make sure there is no white space in the image itself.
I think the button's background and borders are the cause of your headache.
Try something like this:
.custombtn {
margin: 10px;
width:163px;
height:43px;
background-image:url('images/normal.png');
background-color: transparent;
border: none;
}
.custombtn:hover {
background-image:url('images/hover.png');
}
.custombtn:active {
background-image:url('images/click.png');
}