Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;
Related
I need to use container (and not container-fluid) , but I still need to add background to all the remaining background( the background color differ from container to container). any idea how to do it?
thanks!
Your question is not pretty clear.
I will answer according to my understanding.
There should be only one container in the web application. Because it comes with fix width(not in %) i.e. 1170px/970px/750px.
So there should be only one to contain the website.
Now the only background out of container can be styled with the body tag.
body{
background-color: #ddd;
}
I'm working on an iPhone app where I'm using Pixate:
navigation-bar back-indicator {
background-image: url(backIcon.png);
background-size: 25;
}
This results in:
however its not centered with the Back text. How do i get the image to move down slightly?
Ive tried background-top-padding however that simply squashes the image down.
Any ideas? Thanks.
After playing around with padding options, it seems like anything larger than the default indicator height (22pts) cannot be pushed downward with padding.
If you want to create a smaller back indicator, you can account for an increased padding by adjusting the height (or width) accordingly, like so:
navigation-bar back-indicator {
background-image: url(custom_arrow.png);
background-size: 17 19;
background-bottom-padding: 2;
}
Also, it's worth noting that adding right padding to the back indicator will not move the back button text right, so you won't be able to fix the horizontal overlap in your particular example with padding on the back indicator. However, several examples from Apple drop the text altogether when using large indicators, so you might want to consider this as an option.
I have the plugin working on a slideshow of images here:
http://samsweet.info/
I've uploaded all the images at the desired full size; all fall within 600 X 500 px. If I don't specify the height/width in the shortcode, the images are stretched and blown out to fill the entire content area. But when I specify the height and width in the shortcode, the images are not responsive and do not "shrink down" when the window is resized. Can someone guide me on how to get these images to (a) show up as they are at full size, centered and (b) resize properly in a smaller window/mobile device?
Any help appreciated!
If your slider is wrapped in a div, try just resizing the div with css. That way your images will keep their aspect ratio, but you can still use percentages (and max-width).
.slider-div{
width: 80%;
max-width: 600px;
}
This boggled my mind for a year and today I finally figured it out. It is the transition that is stretched. When I changed it to effect="none" it still worked and no more stretching. But the quick click buttons below the images no longer work. Ahhh...always something. But there's a clue at least.
There is a large amount of white space below my flexslider and I do not know how to remove. I have played with the CSS quite bit and nothing seems to work, without breaking the "responsive" behavior. Any help is greatly aprpeciated.
Regards...
Site can be viewed here, all code in located in the head tag:
http://destinjustlisted.com/new/
Your div which contains the slideshow items must have the class "flexslider." Various things are setup for that class in flexslider.css, which is part of the download. One of the CSS properties it has is "margin." You'll see three values there. It looks like this:
margin: 0 0 60px;
I don't know if you're familiar with this property format, but it's common in CSS when you've got 4 settings, as with margin, border, or padding (all of which have 4 sides). You can have up to four values which represent: top, right, bottom, left (like you're going around a clock dial, starting with 12 o'clock). So, for example:
padding: 0 1px 0 2px;
would give no padding on the top and bottom, but 1 pixel on the right and 2 pixels on the left.
The flexslider CSS has 60 pixels of margin on the bottom. That leaves room for the navigation buttons if you want a visual representation of where you are in your slideshow or for you to select a specific slide. Unfortunately, if you set the property "controlNav" to "false" when you're setting up the plugin if you don't want to show those "buttons," then you just end up with the big blank area under the control. If you just set that property to this:
margin: 0;
all your problems will be solved!
If your images are different sizes (heights in particular), the Flexslider container will display as high as the tallest image. This can create the gap that you might see.
If this is the cause, resize your images in advance so they all have the same heights and widths.
I'm trying to resize a background image on a button
btn.setStyleSheet("background-image: url(:/AddButton.png);"
"background-repeat: no-repeat;");
tried it with
background-size: 10px auto;
but pyqt seems to be missing this CSS attribute
Is there any other way of scaling the background image on the button?
I need the background image as the icon on the button will be used on top.
any suggestions?
I believe you need to use border-image. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case when both of them are specified, the border-image draws over the background-image.