Front page background header image size
-
-
- Erich Markert
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
Similar to the Helium theme demo, I was trying to set up a background image for the header section of my front page and have a button that links to an article. I replaced the default Helium demo image in the header section of core styles for my front page and then tried adding a button.
When I tried using a custom HTML particle with the code to create the button, the background image was dramatically reduced to a height a bit taller than the button itself.
When I tried with the owl carousel, I needed to specify an image for the carousel item, otherwise I would have a blank overlay and the background image would be the full sized image.
If I specified the same image for the carousel item as I did in the core styles, it would display the carousel item image over top of the background image but at a smaller width.
What I tried next was to create a transparent image the same size of the background image for the carousel item. It worked, but what I noticed is the button disappears when viewed on a smartphone or in responsive design mode on firefox. BTW, this also happens on the Gantry Helium demo, too.
I was hoping, somehow, to use a background image for the header layout section with a text and a button overlay to avoid having to do banner images
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Please do a screenshot of your problem and annotate to make it clear.
Regards, Mark. - 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.
-
-
-
- Erich Markert
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
So the link to the front page is
redeemernewpaltz.org/
and it currently uses the layout, frontpage
I currently have the background image for the Header Styles in Preset 5 set to redeemernewpaltz.org/images/crosses-at-sunrise-1695x955.png . What I'd like displayed is the full image with some text and a button that overlays the image. When the button is clicked it takes the user to redeemernewpaltz.org/worship/holy-week-easter .
I had tried using a custom HTML particle, but at best I a displayed image that is perhaps 100px tall.
I tried several options with the owl carousel, but it seems you have to specify an image for the carousel item otherwise an empty frame was overlayed the background image. What I ended up doing was creating a transparent image of the same size and setting that for the carousel item. For whatever reason, it worked and I was ok with it. The background image displayed full screen and properly resized on a smartphone.
However, the problem, is that the button disappears when viewed via the Responsive Design mode on Web Developer AND when using a smartphone. This same issue, by the way, happens when viewing the Gantry 5 Helium demo page.
The Helium install is the default and I've made no changes to any of the underlying CSS files.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ok I added two line of CSS to you custom.scss file - it should be what you wanted now?
Regards, Mark. - 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.
-
-
-
- Erich Markert
- Jr. Rocketeer
- Posts: 36
- Thanks: 0
-
Thanks. It is working now.
Is there a better/easier way to do this than using owl carousel?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I would just use a customhtml particle if all you want is an image with some text over the top. You will of course need a little custom CSS with that solution too.
Regards, Mark. - 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.
-
Time to create page: 0.065 seconds