-
AuthorPosts
-
October 24, 2016 at 10:32 pm #703459
How can i add an image ass fullwith header background??
October 25, 2016 at 6:22 am #703571Hey marcelhochman,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
header { background: url(https://www.w3schools.com/css/trolltunga.jpg) !important; }
Change url of the image to your image url.
Best regards,
JordanOctober 26, 2016 at 7:03 pm #704486nice, but what is the right size?
October 27, 2016 at 7:52 am #704697Hi,
There is no wrong or right size unfortunately, try using a size which will not be too heavy to load but will still look good on most screen sizes. I would try an image which is somewhere in the area of 1500 pixels wide. If you want to use different images for different screen sizes you could try using CSS media queries: http://www.w3schools.com/css/css3_mediaqueries_ex.asp
Best regards,
RikardNovember 3, 2016 at 3:41 pm #707785i am using a image with 1500×400 px and it is much biggr that the header and croping. What is the size opf the image you used in the example jordan?
thank you
November 3, 2016 at 3:49 pm #707791Also the code given is creating a background in the “icon boxes” places in my home.
November 7, 2016 at 4:52 am #708993Hi,
The image size will depend on the header size and then you can use css media queries to use different background image for different screen sizes. What is the current settings of your header? Please post the url here so that we can inspect it.
Best regards,
IsmaelNovember 7, 2016 at 3:40 pm #709287November 3, 2016 at 3:41 pm #707785 EDIT | REPLY
marcelhochman
Participant
i am using a image with 1500×400 px and it is much biggr that the header and croping. What is the size opf the image you used in the example jordan?thank you
marcelhochman
Participant
Also the code given is creating a background in the “icon boxes” places in my home.I need to do exactly what he did but without the problemns in the place i mentioned.
November 8, 2016 at 2:34 pm #709809Hi,
not sure what you mean.
About which image are you talking about? about the one with the clouds? please send us a precise link and a screenshot showing what you want to achieve. Use imgur.com or dropbox.Best regards,
AndyNovember 8, 2016 at 4:53 pm #709893The image in jordans example. We are not going anywhere here. Can t JORDAN simple give me the size of the iamge and check the other problem i mentioned in the code?
header {
background: url(http://www.w3schools.com/css/trolltunga.jpg) !important;
}November 8, 2016 at 5:02 pm #709896It is very friustrating to come here again and again for more than 20 days and see that nobody is really trying anything to solve to problem. You are not even taking time to read it right.
November 8, 2016 at 5:08 pm #709901You have the website, and the code to acess it. I want to palce an image as the background of my header. This is a very simple process, that thousands of websites do. I do not have more time for procastination. You can do it or tell me how to do it.
November 9, 2016 at 4:01 pm #710276Hi,
this is what I see on the link you’ve provided us (see screenshot in private section). There I can’t find any header background image, nor a header itself. So please provide us a precise link finally, where we can inspect the elements in question. Admin access would be helpful as well.
Best regards,
AndyNovember 9, 2016 at 7:22 pm #710411Your screenshot shows nothing. I have a header on the website, with an image on it. In all your answers you are not trying to find a solution. Other were very close but they simple stoped to answer. What happened to this guys? This is not right and i am tired already.
November 11, 2016 at 8:07 am #711015Hi!
The size of the image in the link given by jordan ( http://www.w3schools.com/css/trolltunga.jpg ) is 1000px x 300px. There’s no right image size unfortunately, because different monitors or devices have different screen sizes, for example some screens are using 1600px wide monitor some are 1400px, ipad landscape for example uses 1024px while in portrait it’s 768px. The right size differs in each device or monitor, to know more information regarding it you can check: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
What I can see on my end is same as Andy’s screenshot, it seems that it’s in maintenance mode and we can’t see how it looks like or can’t inspect it further. Can you atleast provide a screenshot on your site so we can atleast know how it looks like. We need as much information we can get so we can provide better solutions. Hope you would understand.
Can you
Regards,
NikkoNovember 11, 2016 at 6:23 pm #711313I need a size that will work well on desktop and mobiles, or all the sizes that i have to place and where to place them. I am sure it is not new to you, putting an image on the header.
November 12, 2016 at 5:10 am #711381Hey!
You can add the following codes to Quick CSS, just replace the IMAGE_URL with the image you have, I will be suggesting image widths on each.
This is for desktops and all screens that uses more than 1024px screen width. Suggested image width is 1600px.
#header { background: url('IMAGE_URL') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
This is for ipad or tablets in landscape orientation. Suggested image width is 1024px.
@media only screen and (max-width:1024px) { #header { background-image: url('IMAGE_URL'); } }
This is for ipad or tablets in portrait orientation and mobile in landscape orientation. Suggested image width is 768px.
@media only screen and (max-width:768px) { #header { background-image: url('IMAGE_URL'); } }
This is for iphone or mobile devices in portrait orientation. Suggested image width is 480px.
@media only screen and (max-width:480px) { #header { background-image: url('IMAGE_URL'); } }
You have 4 image with different sizes you need to use, kindly use the suggested image size. Hope this helps.
Best regards,
Nikko- This reply was modified 8 years ago by Nikko.
November 29, 2016 at 7:29 pm #718459http://www.4shared.com/rar/5y90Z7xhce/header__1_.html the codes you gave me do not work on header, see images…
December 2, 2016 at 5:07 pm #719819Hi,
Please change every “header” in the codes Nikko posted above to “#header” and it should work.
Best regards,
YigitDecember 2, 2016 at 7:41 pm #719866changed them all to #header andafter tryed to “#header” nothing changes.
December 2, 2016 at 11:59 pm #719926Hi,
I apologize for that mistake, I forgot to add # (I have fixed the code above). I removed “ from your Quick CSS, however it is still missing this so the header image should show up, kindly add it to Quick CSS:
#top .header_bg { background: transparent !important; }
I tried to add the code and removed it shortly after since I don’t think it looks good with logo and the background.
Best regards,
Nikko- This reply was modified 8 years ago by Nikko.
December 16, 2016 at 9:53 pm #725557I place an image with the sioze you told me for desktop and it is croping even so.
December 22, 2016 at 10:16 pm #727682Hi!
I checked the site and the width is good however, the height of the background image is too long. Can you try to use 220px for the height of the image?
Regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.