SOLVED! image size in showcase background
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Hi, how can I change the dimensions of the background image in the showcase position?
Is there a way to change the dimensions of the background image which is set up via the "Select a Background-Image" (Module: Frontpage Showcase)? (See attachment of homepage as it is right now, on my local copy. I need the image to cover the dimensions of the whole header, not just the center)
These are the actual dimensions of the image I need to put on the header:
Dimensions1920 × 320 px. This should be enough to cover the back, but it doesn't.
I tried the solution I found on this solved post: "[SOLVED] mixed image in showcase", but it did not worked for me.
Many thanks for your help. - Last Edit: 11 years 10 months ago by webseo.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
I know you said it on localhost but without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Can you please post a link to the problem and we will do our best to assist you.
Thanks
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Hi,
I figured it out.
I added a gantry-custom.css to css folder, in the gantry template folder, with a call to the file I wanted as background, (example):
"div#rt-showcase .rt-showcase-pattern {
background: url('/your-folder/path/to-your-own-image/your_img_bg.jpg'); !important;
}"
and then changed the "master-459e2e8f09af388e04e55be915872cb9.css" in the css-compiled folder ( look for: ".rt-showcase-pattern { " ) to the size I needed: background-size: 1920px x 320px;
.rt-showcase-pattern {
background-image: -webkit-linear-gradient(rgba(0,0,0,0.1) 2px,transparent 2px), -webkit-linear-gradient(0,rgba(0,0,0,0.1) 2px,transparent 2px), -webkit-linear-gradient(rgba(0,0,0,0.1) 1px,transparent 1px), -webkit-linear-gradient(0,rgba(0,0,0,0.1) 1px,transparent 1px);
background-size: 1920px x 320px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
Thanks for looking! -
The following users have thanked you: John Chenoweth
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Changing anything in the compiled css is futile because as soon as any other change is made it will re-compile with details from the less files.
Don't forget that setting generic fixed images will have a negative effect on responsiveness too.
As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template.
-
1. For older templates (pre FRACTURE
-
2. For those of you that want to use the power of
Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.
For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org/documentation/joomla/advanced/less-css . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Also, is there then, an easier way to make what I need happen? I have a live site with the banner extending from border to border on the header, the way I need it. You can see it here:
gantry25.discoverlemongrove.com/
many thanks for looking.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
The way you have on that site is not good as it is not responsive. When checked on smartphone or tablet I get a small portion of image. On my two monitor set up if I stretch across both screens I get the background repeated. You can imagine how this would look on a 50" plasma screen
I personally would go for an image at 1200 plus maybe 150 either side to fade to a fixed colour. That way you still get the band on large screens with the image above the content area. Plus it wouldn't be so large that scaling down to tablets and phones would cause a very wide image to be very short and perhaps not discernable.
Of course you could end up using the mediaqueries options to use a different image for different devices which would be a better option still.
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Sorry for the delay in getting back to this one
OK - mediaqueries.less is a file in the template that allows you to set up specific code for the viewport that the site is being viewed in. This means you can set up various alternatives such as the following example taken from the Gantry template...
The above code is allowing any h1 font displayed in the class of promo to be given a size of 3.7em but only if being viewed on a desktop screen with a size between 960px and 1199px@media only screen and (min-width: 960px) and (max-width: 1199px) { .promo { h1 {font-size: 3.7em;} p {font-size: 1.3em;} } .promo-image {width: 40%;} .promo-image img {max-width: 100%;} }
If you look at that file you will see other options that have been set up. There is no reason why you could not set up backgrounds based on media size.
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Hi thank you for your answer, but, do you mean that I need to copy ans paste the same code on my .less css file? If so on which folder? The Css, Css-compiled? custom css?
A POINT OF VIEW FROM AN END USER:
Please consider that not everybody is as well versed as some of you guys who have been working with the .less concept for a while. Also, from my point of view, (not really a code developer, but website developer), your answers are insufficient (for me at least), to devise the full solution I need.
I say that it should be almost self-evident that not everybody would want to keep the header the same way you guys designed it. To me, as a web developer, is one of the first obvious things I, or my clients, would want to change immediately; why not providing the alternative explanation on how to do this from the start, even right here? Maybe, even as an extra user friendly effort that would save All of us time, (starting with yourselves). I mean, you all appear to believe this is ultra simple to do, (and I believe that as everything else, it is, after an "X" number of times you do this), why not showing us, who seldom tackle the code this far, the clear through way on how to do it from the start? Why not providing full instructions as to how to do this?
I appreciate your effort in helping, but, time is of the essence with this client, and I have not much time to "discover" and learn how to do this, left over.
Thanks anyway.
-
Time to create page: 0.062 seconds