Tagged: background image
-
AuthorPosts
-
November 30, 2015 at 2:33 am #544253
Hello
I would like to know how this site:
http://careerhearted.com/in the section where it says:
“You Have Passion. We Know Business.
Let us show you how to take care of your business so it can start taking care of you!
LET US HELP YOU”Is that by putting in a background image?
thank you
November 30, 2015 at 4:21 am #544267Hey Nathan!
In the Enfold layout builder, this can be achieved by inserting a text element, a transparent button element and a background image in a color section.
Note that the background image on that website was blurred before hand.
Cheers!
DakeDecember 7, 2015 at 3:45 am #547738Thank you.
For the transparent element, so add all these in a fullwidth section element and to position the button edit the button padding?
December 7, 2015 at 6:47 am #547777Hi!
Correct however you can reposition the button with the below css:
#top .avia-button.avia-color-light { top: 5px !important; left: 0px !important; }
Cheers!
DakeDecember 7, 2015 at 6:54 am #547778I think I’m learning what you are communicating.
How did this website:
http://careerhearted.com/make the top image the full width of the page and the add the button in the middle?
Can you please give me a step by step because I’m still learning.Thank you Dake
December 7, 2015 at 7:25 am #547793Hey!
That can actually be performed with the same steps I described earlier.
Below is the basic set up and layout used:
Color section (with a custom section background image) > Special Heading > Text Element (set to light transparent button color) > Button > Text Element
Best regards,
DakeDecember 7, 2015 at 7:32 am #547798Thank you for explaining it visually, I learned it right away!
I see now that we all learn differently, and when I was reading it, it didn’t yet make sense to me.
Thank you so much, now I can move forward and do this!
December 7, 2015 at 7:36 am #547802Hey!
Glad you got that short out!
Please do let us know if you need anything else, we will be more than happy to assist.Cheers!
BasilisDecember 7, 2015 at 7:37 am #547804One last question, how is the image spanning the whole width off the page?
December 7, 2015 at 7:40 am #547807Hi!
The image is spanning the whole width because it is fairly large and is set as a background image in the color section:
Regards,
DakeDecember 17, 2015 at 3:03 am #554110This is what showed up on my home page.
What step am I missing to do?
Thank you, sorry for so many questions.
December 17, 2015 at 3:36 am #554118bodytalkcare.com
December 18, 2015 at 5:07 am #554812Hi,
I’m not sure what you meant by your last posts, were you supposed to attach a screenshot? If so I can’t see one?
Regards,
RikardDecember 18, 2015 at 4:44 pm #555065I hear you, the image is on the main home page for bodytalkcare.com
The image is far from the header menu and I need the image with the button to take up all the space like the main pages for:
•https://www.airbnb.com
I need my image to be like the https://www.airbnb.com home page where the image goes all the way to the sides and top, how do I set the perimeters for that?Thank you for your help!
December 23, 2015 at 4:29 pm #557037Hey!
try this code in Quick CSS field:
.flex_column.av_one_full.av-animated-generic.fade-in.flex_column_div.av-zero-column-padding.first.avia-builder-el-0.avia-builder-el-no-sibling.avia_start_animation.avia_start_delayed_animation { width: 112%; left: -6%; height: 534px !important; }
but why not choose fullscreen slider element instead?
Best regards,
AndyDecember 23, 2015 at 8:33 pm #557201Hi Andy,
It didn’t work
http://bodytalkcare.com/and I would like the image to be behind the menu too like the uber.com website or https://www.airbnb.com/?af=43720035&c=A_TC%3Deepxztmpm2%26G_MT%3De%26G_CR%3D100808697856%26G_N%3Dg%26G_K%3Dairbandb%26G_P%3D%26G_D%3Dc&gclid=Cj0KEQiAqemzBRDh2vGKmMnqoegBEiQAqJPuyDLTzH3wyqIq-O3N9acLithgK0rQoL3KdEPRnJSWuDUaAg-q8P8HAQ&dclid=CNyJ2JrP8skCFRJgAQodnA4MNQ
thank you
December 23, 2015 at 11:48 pm #557234Hey!
You can display the airbnb and uber websites header layout by using a color section and setting your header to transparent or transparent glossy.
Best regards,
DakeDecember 24, 2015 at 12:36 am #557271Thank you, where is that located?
December 24, 2015 at 2:28 am #557306Hey!
You’re welcome :)
It is located on the right side of the edit page screen as shown in this screenshot:
Best regards,
DakeDecember 24, 2015 at 3:49 am #557319Thank you.
Is there a padding I need to set?
Why is the image so thin and small?
I’m needing the image to be the full screen size.December 26, 2015 at 4:39 pm #557442Hey!
it’s small because WordPress is cropping image sizes by default when uploading them. You can control this by using a plugin like: https://de.wordpress.org/plugins/simple-image-sizes/
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.