Wondering if any can help with this issue I'm having. I've inherited a site that uses wpbakery page builder. The original developer used a LOT of php to build the pages, but I am trying to make it easier for the client to use by rebuilding some pages with wpbakery. In order to get the site to flow well visually, I want to incorporate some background images that were included. However, the images are only 1440 px in width and I want them o stretch across the full screen for whatever size the window is. If I set the row to Stretch row and content (no padding) and have the image in a Single Image add-on, it still only displays as 1440 px wide at the largest. Tried it as a background image to the row, and that goes full width, but it doesn't shrink to the screen size fully. (leaves some image outside the boundaries when the screen gets smaller than 1440 px) Tried to give a Single Image a class and tell the class in the Custom CSS editor to be width: 100%, but that didn't work either. Anyone have any ideas as to how to implement this?
Related
I'm using a 3x3 image grid with Lightbox (in MDBootstrap).
The images all have a 33% width (including padding).
All images are retrieved from the Instagram Basic Display API.
These images usually have a native resolution of 1440x1440px.
However, sometimes, for some odd reason, an image will have a resolution of 1440x1441 (one pixel wider).
Putting these images that are one pixel higher in a grid, scaling them down to 33% width, will cause them to be slightly larger, which thereby causes 3 images to no longer fit on one row. Please see example below:
As you can see, the images aren't aligned in a 3x3 grid. I found out that this is caused by the second image in the top row, which is actually 156 in width by 156.094px in height(!). This is obviously caused by the image provided by Instagram being 1440x1441 (in stead of 1440x1440):
I have tried using display: inline-table on the image object as someone in another topic suggested (to round down decimal pixels), but this didn't work. Manually resizing the image to 155.891px x 156px (using Inspect Element in Chrome) makes the image fit:
So my question is: without having to check every image's width with javascript and resizing all of them to the same height, how can I make sure the image has an exact 1:1 aspect ratio as opposed to ~1:1.001 to prevent this from happening?
Any help would be greatly appreciated!
EDIT: fixed switching height/width around, thanks #CBroe
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
Hello I have been looking for some tutorial on CSS sprites for Magento. Found a couple of plugins like GTspeed, Webo but so far nothing achieved.
Can you help?
Knocking off CSS Sprites
Imagine you have six images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster.
Instead of downloading six images, your webpage would now only have to download one.
This is the beauty of CSS sprites. One resource, but several uses.
Most webpages use several small images in their design. Background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed.
Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.
The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.
How to combine images into CSS sprites
There are two main steps to take when creating CSS sprites. First you must make the image and second you must position the image.
Combining images
We will use a simple example here. Let's say we have two images we want to display on a webpage for style purposes and wish to combine them into one. We must know the size of the images in order to create the sprite. We will use an example where both images are the same size (50 pixels by 50 pixels).
To combine these images we would create an image that was 100 pixels by 50 pixels. We must call this image something, let's call it "sprite.png". Now that we have a combined image, we can use what we know about the image to display it correctly on our web page.
The combined image has a width of 50 pixels and a height of 100 pixels. As such we could say that the first image (the megaphone) resides in the top 50 pixels of the new image, and that the second image (smiley face) resides in the bottom 50 pixels of the image. We can use this knowledge to position our images correctly on our page. In essence, we will display the top half of the image when we want the megaphone and the bottom half of the image when we want the smiley face. This is how we go about doing that...
Positioning the images on the page
For this example will we use the images as background images in divs. This means that we will create empty div tags in our HTML to display images. if we wanted the megaphone image to show up somewhere on our page we could create a CSS div class of "megaphone"...
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
The above CSS code is saying the width and height of the megaphone image (50px by 50px) it is also calling the image "sprite.png" which is our combined image. Finally it is saying the "0 0px" part, which is how the sprite works. By telling the image to start at "0 0px" it is saying that the image should be displayed from 0 pixels X and 0 pixels Y. Dont let this scare you or bring up bad algebra homework nightmares. It is really saying "start the image at the top" and "start the image at the left".
Since we defined the width and height of the image in the CSS, the image will only display 50 pixels down the image (where the megaphone is) and will stop, thereby not displaying the smiley face at all. Now let's do the smiley face and see how that changes our code. We will create a CSS class called "smile"...
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
Note that we are still stating the same width and height, we are still calling the same image, but what we have changed is the "0 -50px" part. This is because we are now telling the image to start somewhere else. specifically, we are stating that the image should start 50 pixels down (-50px). This is because the smiley face image does not start until the bottom half of the combined image, 50 pixels down from the top.
Now that the CSS is done we can just call a div in our HTML wherever we want the images to show up. Where we want a megaphone we just enter an empty div called "megaphone"
When we want the smiley face we enter a div called "smile"
That is the basics of combining images into CSS sprites, but there are many ways to do it and it is worth exploring what is best for your pages. The above tutorial was just to generally display how sprites work and is by no means an in depth discussion of them.
In my website, i have placed an image after the navigation bar. What i expect is the image re-size itself according to the size of the screen. Actually it does re-size but it leaves a blank space above the image when it re sizes which looks award.
The image fits exactly when the scrren resolution is above 1170px. But when i re-size it to lower resolutions it tends to introduce the blank space.
I have tried many element styles like margin-top: auto, margin-bottom:auto etc. But i couldn't hide that space dynamically. I am so new to the web site development. please help me to fix this issue.
change the style:
.carousel_gallery_item_inner { vertical-align:bottom;}
to:
.carousel_gallery_item_inner { vertical:align:top;}
On my website I have a slider of images across the top. This is the demo of the drupal theme (the company, not my website),
http://demo.drupalizing.com/?theme=bluemasters
All my pictures are different sizes or different kinds of shots. I don't know how to say it. I can re-size in any program. If I keep the aspect ratio, the 960px will be fine, but the bottom will be stretched.
How do I keep it all good and fit it in 960?
If not 960, what is a good number or other type of design?
Can I use CSS? Do I use an image program like Gimp, Paint.net, etc.?
As long as all your pictures are larger than 960px in width you can use HTML or CSS markup to resize the image to 960px. However, please remember that there is no way to display the an entire image say 4000x2000 in a 960px box without making it look small or choppy. In this case I would use an image editing program and cut out the main focus of the image and save it as a 960x300 (or whatever height) image.
From your link, the slider images are all 930px x 320px. You can use CSS to overcome this limitation, but your images might stretch out of proportion.
I would start with a an art work that is 930px x 320px, and just crop your photos according to this aspect ratio.
In this BlueMaster theme, the CSS already has a width set to 100% so no need to worry about scaling.
Online photo editor tool: http://pixlr.com/editor/
File -> New Image
Width -> 930
Height -> 320