First if all I apologize if I have posted this in the wrong place.
I am working on a website for a customer and am getting to the stage where it is almost ready to be released apart from a few minor tweaks.
I am using wordpress to develop the website - I have never used wordpress before so I am kind of learning as I am going along and I am glad the customer understands that.
The problem I am having is related to the header image. I have uploaded a header image by going into Appearance->Header and picked an image that is stored on my hard disk.
The header looks really good on my PC however when I open the website on my phone the header image doesn't get scaled down and the writing on the banner (located on the left) just disappears so all you see is half of the header banner which doesn't look very good.
I am using Mantra as the theme and the responsiveness works fine on my phone but the header image is never re-sized.
I have spend some time on here trying other people's suggestions and the most common solution is found here: Link however I am not sure to which CSS file to add the code.
I would appreciate if somebody out there could point me in the right direction so that I can overcome this issue.
Try having the height of the image: height:100%; It may make it look a little stretched. Or you could make the image height taller and if its a background image the it will cut off what you need
Responsive use in header .. try this in your CSS
.header {
background-size: 50%, auto
}
change 50% with yours
edit :
use image as background-image
Related
I have little website I'm trying to plan on building. But when I started making the background image for it, the image is made so my website is kind of scrolling web page up and down so I made it long. But now the image only shows small part of it, I trying changing resolution of my browser and I could see it but without that I cannot scroll to see the whole image.
The problem which shows that the photo is not fully shown, photo is 2160*3840 px means it is opposite of normal resolution:
If you're using CSS and adding this as a background image to the page body, then it should be an easy problem to solve (and in fact you get quite a few options).
Firstly, lets assume this is your current code:
body {
background-image:url("yourimage.png"); /* The filetype does not matter */
}
Now, as far as CSS sees it, some people viewing your site could be on phones, some on 13" laptops, or some could be viewing it on 5k desktops - if we want the image to work on all at all of these different sizes, then clearly the image is going to have to be modified in some way.
By adding the background-size property here, we can adjust how this happens:
background-size:cover; seems like the best choice for you. It will slightly crop / stretch the image to fit it (but remember, this is probably going to be beneficial).
background-size:100% 100%; will always display 100% of the image - but this will usually result in it being stretched, etc.
There are quite a few other values this property can be set to - you can take a look at them here, or read the spec on it over at MDN.
My artisteer template has a image in the header and on my joomla based webpage as the page width decreases (like on tablets/phones) the image stays the same size and the browser just displays the center of the image.
Is there anyway to duplicate this effect on an embedded image in my article or with some module extension.
Thanks in advance!
Sorry Mate , Never worked with artisteer but i suggest you it's alternative TemplateToaster for future.
I have been working on a website for my job (Don't worry its not web design) and am having some problems. I only know a very tiny bit of HTML and this is what I came up with. They say that is perfectly fine, but the website will not auto size. Here is the code below. I appreciate all the help!
Here is the site,
http://www.stateofusing.org/
Add this to your background image:
style="width:100%; height:auto;"
This will make your backgorund to use 100% of the screen.
If you want everything reziable add this to your body tag.
can also add to css file if you have one
Hope it helps
I think this question is so stupid but forgive me. I'm still learning.
I've converted my website psd to html, css and it's perfect for my monitor. But when someone runs it on less monitor or bigger, everything mess up. Even when I zoom in / out. The content itself is 1024 and the rest are only background. I want like making everything static and whoever previews the website on bigger monitors, the more expands on the background without changing any place. I see this thing in many websites but I cannot locate it in the ass, don't know where is it or what makes the website so static that when I zoom in - out it only zooms in - out as it should be. Not moving divs and messes up things that shouldn't be moved.
Explaining more easily:
There's some websites when you zoom in - out, the content only gets bigger or smaller but it doesn't move from its actual place. I can't do this thing and I would like to know how it's done. Is there any requires rule in the css to add for each div / class? Anything to insert in the body area? etc.
Sorry if I'm not clear enough.
Thanks in advance.
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties