i want to make my site's logo responsive, i work on joomla 3x and my dafault template is gk_magazine.
i tried this:
#gkLogo.cssLogo {
background: #4d90fe url(../images/logo.png)
no-repeat 0 0;
max-width:100% !important;
max-height:auto;
display: block;
margin: 0;
}
but my logo appears to small. I need help! Thanx in advance
Use Background-size property.
Background-size:272px 120px; /* for original size /
Background-size:100%; / to fill the width of the parent div/element */
Refer http://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I have found a good solution for Swiper with the gallery and it works great but there is a problem with height on mobile devices:
I have tried to replace this height: 500px to any dynamic but every time it's hiding without status height. Is there any solution to make it scalable without media queries?
https://jsfiddle.net/vertisan/j8a46vcg/1/
What about this https://jsfiddle.net/q1vr473z/ if u want just give max height
html,body,.container{
height:100%;
width:100%;
}
#slider {
height: 80%;
max-height:500px;
}
Change the background-size
.swiper-slide {
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
}
I am still trying to get the hang of responsive web design.
I am not able to get the header images to scale as the browser gets smaller.
This is the site,
http://instreamenergy.com/strategic-partnerships/
if I try to make the .header-image #header #title-area height:100% or anything else it just reverts to 20px or something and is stuck there.
Any tips would be awesome!
thanks
I think you're looking for the CSS3 property, background-size
since your image is a background image for a DIV.
Stretch and scale CSS background
http://caniuse.com/background-img-opts
If you were using an image tag, <img> you could do this:
img {
max-width: 100%;
}
You also need to get rid of some of the cruft in your CSS for #title-area. Doesn't look like it needs to be floated: left; or have overflow: hidden;. Removed width, changed height to min-height. no-repeat added to background.
I would update it to:
#title-area {
background: url(your-image.jpg) no-repeat;
padding-left: 0;
min-height: 386px;
float: none;
overflow: visible;
background-size: 100% auto;
}
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..
This question already has answers here:
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
(24 answers)
Closed 7 years ago.
I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?
just this as img tag is a content element
img {
content:url(http://example.com/image.png);
}
#divID {
background-image: url("http://imageurlhere.com");
background-repeat: no-repeat;
width: auto; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
No there isn't. You can specify a background image but that's not the same thing.
CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.
No. The closest you can get is setting a background image:
<div id="myimage"></div>
#myimage {
width: 20px;
height: 20px;
background: white url(myimage.gif) no-repeat;
}
After trying these solutions I still wasn't satisfied but I found a solution in this article and it works in Chrome, Firefox, Opera, Safari, IE8+
#divId {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
1: create a 1x1 transparent gif or png.
2: Assign propery "src" of IMG to that image.
3: Define final presentation with "background-image" in the CSS style.
It works like a charm :)