Background Image adjustment to the size of the web browsers

New to web-building ? Simple answers to "How do I . . .?"

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Tue Jun 17, 2014 9:14 am

I am a newbie in web designing. I am using Kompozer to design my web page. I resized my background image size to be 1080px by 1080px. When i publish it and view it in any web browser, the image would not display fully on the browser page, it would have spaces on both sides if it is aligned to the center. Secondly, I want to use text to create something like logo at the top left corner of my index page. "Kenny el" with bigger font size and "Vilvadi" font format. And "Singer and Songwriter" with smaller font size and "Times New Roman" format will be placed and aligned to the center under "Kenny el". How do I fix these please?
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby agsone on Tue Jun 17, 2014 3:56 pm

Post a link to your website so we can get a better idea what we are trying to fix.

The text is probably best achieved by careful placement of headings, maybe using something like google fonts to get the correct look (I wouldn't assume many of your audience have Vivaldi, and what matters is what is on their computer, not yours).

The image we'll have to see to offer best advice ...
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Thu Jun 19, 2014 5:14 pm

The link to my website is http://www.kennyelmusic.com
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Thu Jun 19, 2014 6:04 pm

Firstly, I want "KENNY EL" at the top left corner of the page to have the same left margin with the link "HOME" because it is not rhyme if I browse through Google Chrome. Secondly, I don't know if "Singer and Songwriter" with smaller font size can be placed and aligned at the center under "KENNY EL". Thirdly, my background image is not full in width when view through any Web browsers. I need assistance please. Once again, the link to my website is http://www.kennyelmusic.com
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby wink0r on Thu Jun 19, 2014 6:37 pm

This is not bad for a first attempt when viewed at the design resolution, but is blown when viewed on a larger screen. This is due, in part, to the apparent visual approach to the design. As a quick fix I would suggest putting the whole page into a 'wrapper' div the width of your background image (1080px). Move the background image into the wrapper div and center it in the viewport using margin right and left set to auto.

You can easily add the 'wrapper' div by clicking on the body tag in the structure bar at the bottom of the window and then going to the 'Insert' menu and selecting HTML. Before the <h1> tag type <div> then scroll to the bottom of the code and type </div> after the last <br> tag. Then you can style the div by right clicking on the <div> tag just to the right of the <body> tag in the structure bar and selecting 'inline styles'.

Then I would suggest going through the material on gregtutor's site to learn of better ways to accomplish your goal: http://www.gregtutor.co.uk/
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Thu Jun 19, 2014 7:21 pm

Thanks! What about the first question? I mean the placement of "Singer and Songwriter" under "KENNY EL" and the left margin
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby wink0r on Thu Jun 19, 2014 7:49 pm

Again for a quick fix click within your name and then click the <h1> tag at the right end of the code in the structure bar. Then open the insert>html box again and type the line <p>Singer and Songwriter"</p>. Click OK and the line will show up. You will then probably need to adjust top and bottom margins on the <h1> tag and margin-left on the <p> tag. You will learn all this plus a lot of useful information if you go through gregtutor's material.

Selecting fonts can be done on the text tab of the CSS editor, but, as agsone mentioned, it will depend on the users computer having the selected font. For an unusual font you can create an image and include the text in the image alt tag or you can use external fonts such as Google kindly provides.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Fri Jun 20, 2014 10:47 am

Although, I have not carried out the instructions but there is another question I want to ask. How do I add "Subscribe to my newsletter" form to my website? Is it the same as setting up a feedback form?
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby wink0r on Fri Jun 20, 2014 2:29 pm

Check into MailChimp. I understand the service is free for up to 2000. They would probably provide a code snippet that would produce the signup box.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Wed Jun 25, 2014 6:44 pm

After styling the "div" by right clicking the div tag, do I need to re-save the page and put "background-repeat: no-repeat so that the background image will not tile, before publishing it? After publishing it and checked through web browser, the background image did not appear and all other contents were positioned to the left. But I want to restart the designing all over again now.
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby wink0r on Wed Jun 25, 2014 7:04 pm

All that I see on the site at the moment is the background image. Probably I would use the 'no repeat' but I would give the containing div a background color (before the image in the code) probably a gray close to the color of the sky in your image. That way if a page grew longer than the background image it would not go to a stark white below the image.

All of the styling would be better done in an external style sheet. That way, if you should add additional pages, you would not need to go through all of the styling again for the new pages. Using the inline style was just intended as a quick fix for the page as it was at that time.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Wed Jun 25, 2014 7:23 pm

And while publishing the background image, it will not indicate if the background image is publishing and when it returns back to kompozer window after publishing, the background image will disappear. Any solution please?
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Re: Background Image adjustment to the size of the web browsers

Postby wink0r on Wed Jun 25, 2014 7:59 pm

Occasionally in KompoZer when things don't appear as you expect you must 'revert' the KompoZer window. This is similar to refreshing the browser window. To revert the window right click on the open tab and choose 'revert' from the context menu.

It sounds as if you are using the KompoZer publish function. While this works OK with some server configurations some of the time there are known problems with the publish function. It is always safer to publish via an FTP client. If you use FireFox there is an FTP addon called FireFTP. I have used FileZilla (freeware) as my FTP client for several years.

Checking again, the background image is the only thing showing on the site. There is no other code in the index.html file that is currently on the server.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Background Image adjustment to the size of the web browsers

Postby gregtutor on Fri Jun 27, 2014 11:32 am

Currently the code behind your page is reading:

<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(website/myfirstimage.jpg);" alink="#000099" link="#000099" vlink="#990099">KENNY<br>
</body></html>

The bit that worries me is:

url(website/myfirstimage.jpg)

This is telling the browser to look in a folder called "website" and display the image found there called "myfirstimage.jpg".

I only see a white page and no image. That suggests either that the server does not have a folder called "website" within your web site folder on the server or that the image is not named as stated or that the image has not been uploaded to the correct location, so can't be found.

The standard advice is to set up your own computer with a folder called "website" and within that a sub-folder called "images" for any images. You then publish the entire website folder with all its contents.

That way the folders and files on the server should "mirror" those found on your local computer and you can use the "relative links" feature of KompoZer to ensure things match on both computers.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3784
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Background Image adjustment to the size of the web browsers

Postby Kenny-1982_eL on Fri Jun 27, 2014 4:47 pm

I'm getting it now. Should I publish the entire website folder on my computer to public_html on my website server?
Kenny-1982_eL
 
Posts: 19
Joined: Mon Jun 16, 2014 12:23 pm
Country: Nigeria (ng)

Next

Return to Beginner Q & A


Who is online

Users browsing this forum: No registered users and 2 guests