Image background for mobile devices

Report · Jul 24, 2017

Evening. I have added an image to my website's background via D.W. through the properties page. How do I set it up where it will fit for mobile devices? Phone and tablets? The other items work minus the background image still remains the same. Thanks in advance.

Report · Jul 24, 2017

Normally you would use media queries to adjust the content for a screen size.

Please supply a link to your site so that we can see what is going on.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jul 25, 2017

Background images don't resize to viewport without some help from CSS code. Assuming your background-image is being applied to the <body> of your document, open your document in code view and add this CSS code to the <head> tag.

<style>

body {

background: url(your_BG_image.jpg) no-repeat center center fixed;

background-size: cover;

}

</style>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2017

Sorry for the late reply. Been busy trying to get things done. Here's the website link that I want it to adjust on smart phones and tablets.

http://www.ubermichael.com/

Report · Aug 16, 2017

First, fix your code errors.

Showing results for http://www.ubermichael.com/ - Nu Html Checker

Not sure why you're using tables for any of this. Tables are not ideal in responsive layouts.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 20, 2017

Thanks for the reply. I was curious as to see what errors that you're talking about. I saw the page, but was still somewhat puzzled. So out of curiosity, I'd decided to use some other websites to see if errors pop up. Facebook, yahoo, and one of your portfolio websites etc. And they all come up with errors. And lead me to question if we're looking at actual errors, seeing that the the page that is used for this a beta page.

Report · Aug 20, 2017

It's errors like

Error: No p element in scope but a p end tag seen.
From line 264, column 1; to line 264, column 4
</table>↩↩</p>↩</bod

that upset the applecart.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Aug 21, 2017

81 code errors on 1 page is unacceptable.

Comparing your site to Google, Yahoo or YouTube is like comparing the Wright bros first airplane (Kitty Hawk) to the Space Shuttle. Not quite in the same league at all. Google or Yahoo, etc.... hire teams of experienced programmers who know what they're doing. They understand when & where they can afford to break coding conventions. You don't. As an amateur, your first line of defense against browser rending problems is error-free code. Messy code makes your life more difficult. So try to avoid it., OK?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 22, 2017

Smh. You shouldn't jump the gun with a knee jerk reply. No where was there a comparison to the examples that I'd mentioned. I'm VERY aware of what those companies are able to do. So my point and question had nothing to do with questioning their knowledge of coding etc. But the checker that you used to point out my errors. Seeing that the tool is an ongoing experiment as stated on the page. I am cool with people pointing out errors etc. Hence the point and purpose of coming here for help. But out of curiosity, as I'd already stated, I wanted to see if this checker is legit. As I'd also pointed out, when I used two of your multi sites, it gave me several errors on your site too. That was my point.

Showing results for https://nancy23e2.myportfolio.com/simply-pickles - Nu Html Checker

Report · Aug 22, 2017

Smh?

Do I detect an ambiguity here?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Aug 22, 2017

Smh is an acronym for, shaking my head. I was shaking my head at the defensive reply that I had got.

Report · Aug 22, 2017

I suspect the reasoning for the notation about the validator being an ongoing experiment at w3.org has something to do with the html standard itself being an ongoing experiment at w3.org.

As the standard changes (which it has many times), so will the validator (hopefully in a timely manner). As it stands now, validator.w3.org/nu is the correct place to go to verify your html meets the current HTML5 Standard.

Report · Aug 22, 2017

Thanks Frizt. I'll go with your point and post. I've used the validation site in the past. But that was back around 10 years ago where I'd put up the site temp to run the test vs permanently . I'd go through it and would pass, following with putting the validation logo at the bottom of each website to confirm that the site(s) is error free. I had totally forgot about the validation site. I think that the issue here for me is more to do with the changes over the years via D.W. and Business Catalyst. I'd taken a hiatus from doing websites, so when I got back on D.W. etc, many things had changed within the program, including, "Fireworks" being gone. A program that I like using when I wanted to create graphics for websites.

Report · Aug 23, 2017

If you're a Creative Cloud Subscriber, Fireworks isn't really gone. It's a bit older than the current suite iteration, but it's still part of a paid subscription...

Open the CC Desktop App

Click the Apps tab

Scroll down to the Find Additional Apps bar

Click the blue link on the right side of the Find Additional Apps Bar

Choose the bottom most option, View Previous Versions, from the context menu that comes up

That will populate the Find Additional Apps section with older software still available to you as a subscriber. Fireworks CS6 (version 12.0.0) is available there.

FWIW, you also have the ability to download and install all major Cloud releases of DW (CS6 Cloud, CC, CC2014.x, CC2015.x and CC2017.x). All 5 can be installed on the same machines at the same time, under a single subscription. They just won't run concurrently. So if DWCS6 is a bit more familiar to you, you can install and use that while also getting to know the newer version.

Report · Aug 22, 2017

Re: Adobe Portfolio. I'm in no position to talk about the code used by Adobe Portfolio. It's Adobe's code not mine. If you've ever explored what Adobe Portfolio is and how it works, you understand that it comes free with a Creative Cloud plan & it's a closed system hosted on Adobe's servers. Same goes for Behance. As users we have absolutely no access to the underlying code base.

Re: Reliability of W3C's code validation service. All I can say is W3C (The World Wide Web Consortium) sets the web standards we use. So W3C is in the best position to know what is & is not technically valid code. That said, there are exceptions. Web developers often use code to make browsers behave that is not technically standards compliant. These so called Vendor Prefixes (-moz, -webkit, -ms, -o) are browser specific and thus not part of the standard code specs. But we use them just the same to support older browsers or until modern ones get up to speed with the latest code. For more on Browser Prefixes, see the link on Github. Which Vendor Prefix?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 16, 2017

After you fix your errors, use the CSS code I gave you in reply #2.

Nancy O'Shea— Product User, Community Expert & Moderator

Image background for mobile devices

1 Correct answer